import React, { useState, useEffect, useMemo, useRef } from 'react';
import { 
  Star, 
  RotateCw, 
  Plus, 
  ArrowLeft, 
  Users, 
  Shield, 
  Trash2, 
  Edit3, 
  Copy, 
  Camera, 
  Image as ImageIcon, 
  Lock, 
  Eye, 
  EyeOff, 
  Calculator, 
  X, 
  Globe, 
  User, 
  LogOut, 
  Coins, 
  Check, 
  PiggyBank, 
  AlertTriangle, 
  Sparkles, 
  Search, 
  Calendar, 
  Activity, 
  Wallet, 
  PieChart,
  Unlock,
  Dice5,
  ChevronRight
} from 'lucide-react';
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
import { getAuth, signInAnonymously, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
import { getFirestore, doc, setDoc, getDoc, collection, onSnapshot, updateDoc, deleteDoc } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

const localFirebaseConfig = {
    apiKey: "AIzaSyCQiCaR4vSSSCm4eDnAmqPHEVo0SOu8gL8",
    authDomain: "wuru-bills.firebaseapp.com",
    projectId: "wuru-bills",
    storageBucket: "wuru-bills.firebasestorage.app",
    messagingSenderId: "484804881566",
    appId: "1:484804881566:web:7fa2c4ad521a2ec596df8f",
    measurementId: "G-PYCZ08EQRN"
};

const appId = 'wuru-bills-app';
const firebaseApp = initializeApp(localFirebaseConfig);
const auth = getAuth(firebaseApp);
const db = getFirestore(firebaseApp);

const DRIVE_GAS_URL = 'https://script.google.com/macros/s/AKfycbwPmYPAKsOsPW4Qhcx8D9T_qILr1glY-DzsK9fbz-q8gBkBNALW9tvrWNmOoBefLg8T-g/exec';
const ADMIN_USERNAMES = ['admin', 'maywuru'];
const AVATAR_LIST = Array.from({ length: 40 }, (_, i) => `F${i + 1}.png`);

export default function App() {
  const [currentUser, setCurrentUser] = useState(null);
  const [currentScreen, setCurrentScreen] = useState('login'); // 'login', 'dashboard', 'bill-detail', 'members'
  
  // Real-time caches from Firestore
  const [cacheUsers, setCacheUsers] = useState([]);
  const [cacheBills, setCacheBills] = useState([]);
  const [cacheTransactions, setCacheTransactions] = useState([]);
  const [cachePermissions, setCachePermissions] = useState([]);
  
  // App-wide loading, toast and custom confirm dialog states
  const [isLoading, setIsLoading] = useState(false);
  const [loadingText, setLoadingText] = useState('กำลังโหลด...');
  const [toast, setToast] = useState({ message: '', type: 'success', visible: false });
  const [confirmDialog, setConfirmDialog] = useState({ visible: false, title: '', message: '', onConfirm: null });
  
  // Search & Filter controls
  const [searchBillsQuery, setSearchBillsQuery] = useState('');
  const [sortBillsBy, setSortBillsBy] = useState('newest');
  const [filterOldTrips, setFilterOldTrips] = useState(false);
  const [searchMembersQuery, setSearchMembersQuery] = useState('');
  
  // Navigation / Details states
  const [currentActiveBillId, setCurrentActiveBillId] = useState(null);
  const [currentActiveBillRole, setCurrentActiveBillRole] = useState('Viewer');
  const [billTab, setBillTab] = useState('tx'); // 'tx' or 'summary'
  
  // Login input states
  const [usernameInput, setUsernameInput] = useState('');
  const [passwordInput, setPasswordInput] = useState('');
  const [showLoginPassword, setShowLoginPassword] = useState(false);

  const [isCalcOpen, setIsCalcOpen] = useState(false);
  const [calcExpression, setCalcExpression] = useState('');
  const [calcCurrentInput, setCalcCurrentInput] = useState('0');
  const [calcJustEvaluated, setCalcJustEvaluated] = useState(false);

  // Modal control states
  const [isBillModalOpen, setIsBillModalOpen] = useState(false);
  const [isTxModalOpen, setIsTxModalOpen] = useState(false);
  const [isMemberModalOpen, setIsMemberModalOpen] = useState(false);
  const [isPermissionModalOpen, setIsPermissionModalOpen] = useState(false);
  const [isUserPermissionModalOpen, setIsUserPermissionModalOpen] = useState(false);
  const [isProfileModalOpen, setIsProfileModalOpen] = useState(false);

  // Form states
  const [billForm, setBillForm] = useState({
    id: '',
    name: '',
    start: '',
    end: '',
    status: 'เปิดอยู่',
    currency1: 'THB',
    exchangeRate1: 1,
    currency2: 'NONE',
    exchangeRate2: 0,
    currency3: 'NONE',
    exchangeRate3: 0,
    selectedMembers: [],
    searchQuery: ''
  });

  const [txForm, setTxForm] = useState({
    id: '',
    description: '',
    spentCurrency: 'THB',
    foreignAmount: '',
    exchangeRate: 1,
    totalAmount: '',
    date: '',
    paidBy: '',
    splitType: 'หารเท่า',
    splitTarget: '',
    splitRatios: {}, // { memberName: ratio }
    selectedFile: null,
    fileName: '',
    existingImg: '',
    existingFileId: ''
  });

  const [memberForm, setMemberForm] = useState({
    originalName: '',
    displayName: '',
    avatar: 'F1.png',
    allowLogin: 'No',
    username: '',
    password: ''
  });

  const [selectedUserPermissionName, setSelectedUserPermissionName] = useState('');
  const [profileForm, setProfileForm] = useState({
    avatar: 'F1.png',
    newPassword: '',
    showPassword: false
  });

  useEffect(() => {
    setIsLoading(true);
    setLoadingText('กำลังเชื่อมต่อคลาวด์ความเร็วสูง...');
    
    // Auto-login from localStorage if exists
    const savedUser = localStorage.getItem('splitbill_user');
    if (savedUser) {
      setCurrentUser(JSON.parse(savedUser));
    }

    let authUnsubscribe;
    let usersUnsubscribe;
    let permissionsUnsubscribe;
    let billsUnsubscribe;
    let transactionsUnsubscribe;

    const setupSync = () => {
      const getColRef = (colName) => collection(db, 'artifacts', appId, 'public', 'data', colName);

      usersUnsubscribe = onSnapshot(getColRef('Users'), (snap) => {
        const list = snap.docs.map(d => d.data());
        setCacheUsers(list);
      });

      permissionsUnsubscribe = onSnapshot(getColRef('Permissions'), (snap) => {
        setCachePermissions(snap.docs.map(d => d.data()));
      });

      billsUnsubscribe = onSnapshot(getColRef('Bills'), (snap) => {
        const list = snap.docs.map(d => d.data());
        setCacheBills(list);
      });

      transactionsUnsubscribe = onSnapshot(getColRef('Transactions'), (snap) => {
        setCacheTransactions(snap.docs.map(d => d.data()));
      });

      setIsLoading(false);
    };

    authUnsubscribe = onAuthStateChanged(auth, async (user) => {
      if (user) {
        setupSync();
        
        // Handle direct share link if URL query parameters exist
        const urlParams = new URLSearchParams(window.location.search);
        const publicBillId = urlParams.get('billId');
        const publicKey = urlParams.get('key');

        if (publicBillId && publicKey) {
          const guestUser = { username: 'guest', displayName: 'Guest', role: 'Viewer' };
          setCurrentUser(guestUser);
          setCurrentActiveBillId(publicBillId);
          setCurrentActiveBillRole('Viewer');
          setCurrentScreen('bill-detail');
        } else if (localStorage.getItem('splitbill_user')) {
          setCurrentScreen('dashboard');
        } else {
          setCurrentScreen('login');
        }
      } else {
        signInAnonymously(auth).catch(err => {
          showToast('การยืนยันสิทธิ์ล้มเหลว: ' + err.message, 'error');
        });
      }
    });

    return () => {
      if (authUnsubscribe) authUnsubscribe();
      if (usersUnsubscribe) usersUnsubscribe();
      if (permissionsUnsubscribe) permissionsUnsubscribe();
      if (billsUnsubscribe) billsUnsubscribe();
      if (transactionsUnsubscribe) transactionsUnsubscribe();
    };
  }, []);

  const dbCurrentUserObj = useMemo(() => {
    if (!currentUser) return null;
    return cacheUsers.find(u => 
      (u.Username && u.Username.toLowerCase() === currentUser.username.toLowerCase()) ||
      (u.Display_Name === currentUser.displayName)
    );
  }, [currentUser, cacheUsers]);

  const userAvatarUrl = dbCurrentUserObj?.Avatar || 'F1.png';

  const showToast = (message, type = 'success') => {
    setToast({ message, type, visible: true });
    setTimeout(() => {
      setToast(prev => ({ ...prev, visible: false }));
    }, 3000);
  };

  const triggerConfirm = (title, message, onConfirm) => {
    setConfirmDialog({ visible: true, title, message, onConfirm });
  };

  const handleLoginSubmit = async (e) => {
    e.preventDefault();
    if (!usernameInput || !passwordInput) {
      showToast('กรุณากรอกข้อมูลให้ครบถ้วนนะค้า', 'error');
      return;
    }

    setIsLoading(true);
    setLoadingText('กำลังตรวจสอบข้อมูลผู้ใช้...');
    try {
      const userObj = cacheUsers.find(x => 
        (x.Username && x.Username.toLowerCase() === usernameInput.trim().toLowerCase()) || 
        (x.Display_Name && x.Display_Name.toLowerCase() === usernameInput.trim().toLowerCase())
      );
      
      if (!userObj) throw new Error('ไม่พบชื่อผู้ใช้งานนี้ในระบบ');
      if (userObj.Allow_Login !== 'Yes') throw new Error('บัญชีนี้ยังไม่ได้รับอนุญาตให้ล็อกอินน้า');
      if (userObj.Status === 'Locked') throw new Error('บัญชีถูกล็อกเนื่องจากรหัสผ่านผิดเกิน 5 ครั้ง');

      const userDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'Users', userObj.Display_Name);

      if (userObj.Password === passwordInput) {
        await updateDoc(userDocRef, { Failed_Attempts: 0 });
        const isAdmin = (userObj.Username && ADMIN_USERNAMES.includes(userObj.Username.toLowerCase())) || userObj.Display_Name === 'เม';
        
        const loggedInUser = { username: userObj.Username, displayName: userObj.Display_Name, isAdmin: isAdmin };
        setCurrentUser(loggedInUser);
        localStorage.setItem('splitbill_user', JSON.stringify(loggedInUser));
        
        setUsernameInput('');
        setPasswordInput('');
        setCurrentScreen('dashboard');
        showToast(`ยินดีต้อนรับ ${userObj.Display_Name}! 🐹`, 'success');
      } else {
        const fails = (parseInt(userObj.Failed_Attempts) || 0) + 1;
        if (fails >= 5) {
          await updateDoc(userDocRef, { Failed_Attempts: fails, Status: 'Locked' });
          throw new Error('บัญชีถูกล็อกแล้ว เนื่องจากใส่รหัสผิดครบ 5 ครั้งจ้า');
        } else {
          await updateDoc(userDocRef, { Failed_Attempts: fails });
          throw new Error(`รหัสผ่านไม่ถูกต้อง! (ผิดไปแล้ว ${fails}/5 ครั้ง)`);
        }
      }
    } catch (e) {
      showToast(e.message, 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const handleLogout = () => {
    triggerConfirm('ออกจากระบบ', 'คุณต้องการจะออกจากระบบบิลใช่หรือไม่จ๊ะ? 🥺', () => {
      localStorage.removeItem('splitbill_user');
      setCurrentUser(null);
      setCurrentScreen('login');
      showToast('ออกจากระบบสำเร็จแล้วค่ะ');
    });
  };

  const allowedBills = useMemo(() => {
    if (!currentUser) return [];
    if (currentUser.isAdmin || currentUser.displayName === 'เม' || currentUser.username === 'maywuru') {
      return cacheBills;
    }
    return cacheBills.filter(bill => {
      const perm = cachePermissions.find(p => p.Bill_ID === bill.Bill_ID && p.Username === currentUser.username);
      if (perm && perm.Can_See === 'No') return false;
      if (perm && perm.Can_See === 'Yes') return true;
      const members = bill.Members ? bill.Members.split(',').map(m => m.trim()) : [];
      return members.includes(currentUser.displayName);
    });
  }, [currentUser, cacheBills, cachePermissions]);

  const sortedAndFilteredBills = useMemo(() => {
    let result = [...allowedBills];

    // Filter old cleared trips for admins
    if (filterOldTrips && currentUser?.isAdmin) {
      const today = new Date();
      result = result.filter(b => {
        const isCleared = b.Status === 'เคลียร์แล้ว' || b.Status === 'สำเร็จแล้ว';
        if (!isCleared) return false;
        if (!b.Start_Date) return false;
        const tripDate = new Date(b.Start_Date);
        const diffTime = Math.abs(today - tripDate);
        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
        return diffDays > 150; // 5 months approx
      });
    }

    // Search query filter
    if (searchBillsQuery.trim()) {
      result = result.filter(b => b.Bill_Name && b.Bill_Name.toLowerCase().includes(searchBillsQuery.toLowerCase()));
    }

    // Sorting
    result.sort((a, b) => {
      if (sortBillsBy === 'newest') {
        return new Date(b.Start_Date || 0) - new Date(a.Start_Date || 0);
      } else if (sortBillsBy === 'oldest') {
        return new Date(a.Start_Date || 0) - new Date(b.Start_Date || 0);
      } else if (sortBillsBy === 'name_asc') {
        return (a.Bill_Name || '').localeCompare(b.Bill_Name || '', 'th');
      } else if (sortBillsBy === 'name_desc') {
        return (b.Bill_Name || '').localeCompare(a.Bill_Name || '', 'th');
      }
      return 0;
    });

    return result;
  }, [allowedBills, filterOldTrips, searchBillsQuery, sortBillsBy, currentUser]);

  const currentActiveBillObj = useMemo(() => {
    return cacheBills.find(b => b.Bill_ID === currentActiveBillId) || null;
  }, [currentActiveBillId, cacheBills]);

  const handleCurrencyFieldChange = async (num, currencyCode) => {
    setBillForm(prev => {
      const next = { ...prev };
      next[`currency${num}`] = currencyCode;
      if (currencyCode === 'THB') {
        next[`exchangeRate${num}`] = 1;
      } else if (currencyCode === 'NONE') {
        next[`exchangeRate${num}`] = 0;
      }
      return next;
    });

    if (currencyCode !== 'THB' && currencyCode !== 'NONE') {
      await fetchRateForBillForm(num, currencyCode);
    }
  };

  const fetchRateForBillForm = async (num, code) => {
    setIsLoading(true);
    setLoadingText('กำลังดึงเรทค่าเงินกลางเรียลไทม์...');
    try {
      const res = await fetch(`https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/${code.toLowerCase()}.json`);
      if (!res.ok) throw new Error('API Error');
      const data = await res.json();
      const rate = data[code.toLowerCase()]['thb'];
      setBillForm(prev => ({
        ...prev,
        [`exchangeRate${num}`]: parseFloat(rate).toFixed(5)
      }));
      showToast('ดึงเรทอัตราแลกเปลี่ยนปัจจุบันสำเร็จ ⚡');
    } catch (e) {
      showToast('ไม่สามารถเชื่อมต่อดึงเรทเงินได้ กรุณากรอกเองนะค้า', 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const triggerOpenBillModal = (existingId = '') => {
    if (existingId) {
      const bill = cacheBills.find(b => b.Bill_ID === existingId);
      if (bill) {
        setBillForm({
          id: bill.Bill_ID,
          name: bill.Bill_Name || '',
          start: bill.Start_Date || '',
          end: bill.End_Date || '',
          status: bill.Status || 'เปิดอยู่',
          currency1: bill.Currency_1 || bill.Currency || 'THB',
          exchangeRate1: bill.Exchange_Rate_1 || bill.Exchange_Rate || 1,
          currency2: bill.Currency_2 || 'NONE',
          exchangeRate2: bill.Exchange_Rate_2 || 0,
          currency3: bill.Currency_3 || 'NONE',
          exchangeRate3: bill.Exchange_Rate_3 || 0,
          selectedMembers: bill.Members ? bill.Members.split(',').map(m => m.trim()) : [],
          searchQuery: ''
        });
      }
    } else {
      setBillForm({
        id: '',
        name: '',
        start: new Date().toISOString().split('T')[0],
        end: '',
        status: 'เปิดอยู่',
        currency1: 'THB',
        exchangeRate1: 1,
        currency2: 'NONE',
        exchangeRate2: 0,
        currency3: 'NONE',
        exchangeRate3: 0,
        selectedMembers: [],
        searchQuery: ''
      });
    }
    setIsBillModalOpen(true);
  };

  const handleSaveBill = async (e) => {
    e.preventDefault();
    if (!billForm.name || !billForm.start) {
      showToast('กรุณากรอกชื่อทริปและวันที่เริ่มนะค้า', 'error');
      return;
    }
    if (billForm.selectedMembers.length === 0) {
      showToast('กรุณาเลือกเพื่อนในทริปอย่างน้อย 1 คนน้า', 'error');
      return;
    }

    setIsLoading(true);
    setLoadingText('กำลังบันทึกข้อมูลทริปไปยังคลาวด์...');
    try {
      const membersText = billForm.selectedMembers.join(', ');
      const bData = {
        Bill_ID: billForm.id || 'B' + Date.now().toString().slice(-6),
        Bill_Name: billForm.name,
        Start_Date: billForm.start,
        End_Date: billForm.end || '',
        Status: billForm.status,
        Members: membersText,
        Currency_1: billForm.currency1,
        Exchange_Rate_1: parseFloat(billForm.exchangeRate1) || 1,
        Currency_2: billForm.currency2,
        Exchange_Rate_2: parseFloat(billForm.exchangeRate2) || 0,
        Currency_3: billForm.currency3,
        Exchange_Rate_3: parseFloat(billForm.exchangeRate3) || 0,
        Currency: billForm.currency1, // Backwards compatibility
        Exchange_Rate: parseFloat(billForm.exchangeRate1) || 1,
      };

      if (!billForm.id) {
        bData.Share_Key = '';
      }

      await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Bills', bData.Bill_ID), bData, { merge: true });
      showToast(billForm.id ? 'แก้ไขข้อมูลทริปเรียบร้อย 💖' : 'สร้างทริปสำเร็จและเปิดเรียลไทม์แล้ว 💖');
      setIsBillModalOpen(false);
    } catch (e) {
      showToast('เกิดข้อผิดพลาด: ' + e.message, 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const activeBillTransactions = useMemo(() => {
    return cacheTransactions.filter(t => t.Bill_ID === currentActiveBillId);
  }, [cacheTransactions, currentActiveBillId]);

  const activeBillMembersList = useMemo(() => {
    if (!currentActiveBillObj) return [];
    return currentActiveBillObj.Members ? currentActiveBillObj.Members.split(',').map(m => m.trim()).filter(m => m) : [];
  }, [currentActiveBillObj]);

  const debtSettlementData = useMemo(() => {
    if (!currentActiveBillObj || activeBillMembersList.length === 0) return { totalTrip: 0, avgPerPerson: 0, settlements: [], memberStats: [] };

    let paidTotal = {};
    let shareTotal = {};
    let netBalance = {};

    activeBillMembersList.forEach(m => {
      paidTotal[m] = 0;
      shareTotal[m] = 0;
      netBalance[m] = 0;
    });

    activeBillTransactions.forEach(tx => {
      const amt = parseFloat(tx.Total_Amount) || 0;
      const payer = tx.Paid_By;

      if (paidTotal[payer] !== undefined) {
        paidTotal[payer] += amt;
      }

      if (tx.Split_Type === 'หารเท่า') {
        const splitAmt = amt / activeBillMembersList.length;
        activeBillMembersList.forEach(m => {
          if (shareTotal[m] !== undefined) shareTotal[m] += splitAmt;
        });
      } else if (tx.Split_Type === 'จ่ายเต็มจำนวน') {
        const target = tx.Split_Detail?.trim();
        if (shareTotal[target] !== undefined) {
          shareTotal[target] += amt;
        }
      } else if (tx.Split_Type === 'กำหนดสัดส่วน') {
        const parts = tx.Split_Detail ? tx.Split_Detail.split(',') : [];
        let totalParts = 0;
        let parsedParts = {};
        parts.forEach(p => {
          const [name, part] = p.split(':');
          if (name && part) {
            const n = name.trim();
            const pt = parseFloat(part);
            parsedParts[n] = pt;
            totalParts += pt;
          }
        });
        if (totalParts > 0) {
          for (let name in parsedParts) {
            if (shareTotal[name] !== undefined) {
              shareTotal[name] += (parsedParts[name] / totalParts) * amt;
            }
          }
        }
      }
    });

    let debtors = [];
    let creditors = [];
    activeBillMembersList.forEach(m => {
      netBalance[m] = paidTotal[m] - shareTotal[m];
      const val = Math.round(netBalance[m] * 100) / 100;
      if (val > 0.05) {
        creditors.push({ name: m, amount: val });
      } else if (val < -0.05) {
        debtors.push({ name: m, amount: Math.abs(val) });
      }
    });

    debtors.sort((a, b) => b.amount - a.amount);
    creditors.sort((a, b) => b.amount - a.amount);

    let settlements = [];
    let i = 0, j = 0;
    const debtTemp = debtors.map(d => ({ ...d }));
    const credTemp = creditors.map(c => ({ ...c }));

    while (i < debtTemp.length && j < credTemp.length) {
      let d = debtTemp[i];
      let c = credTemp[j];
      let amountToSettle = Math.min(d.amount, c.amount);
      if (amountToSettle > 0.01) {
        settlements.push({ from: d.name, to: c.name, amount: amountToSettle });
        d.amount -= amountToSettle;
        c.amount -= amountToSettle;
      }
      if (d.amount < 0.05) i++;
      if (c.amount < 0.05) j++;
    }

    const totalTrip = activeBillTransactions.reduce((sum, t) => sum + (parseFloat(t.Total_Amount) || 0), 0);
    const avgPerPerson = totalTrip / activeBillMembersList.length;

    const memberStats = activeBillMembersList.map(m => ({
      name: m,
      paid: paidTotal[m],
      share: shareTotal[m],
      net: netBalance[m]
    }));

    return { totalTrip, avgPerPerson, settlements, memberStats };
  }, [activeBillTransactions, activeBillMembersList, currentActiveBillObj]);

  const handleTxCurrencyChange = (currencyCode) => {
    let rate = 1;
    if (currencyCode !== 'THB') {
      const activeTrip = currentActiveBillObj;
      if (activeTrip) {
        if (activeTrip.Currency_1 === currencyCode) rate = activeTrip.Exchange_Rate_1 || 1;
        else if (activeTrip.Currency_2 === currencyCode) rate = activeTrip.Exchange_Rate_2 || 1;
        else if (activeTrip.Currency_3 === currencyCode) rate = activeTrip.Exchange_Rate_3 || 1;
      }
    }

    setTxForm(prev => {
      const updated = { ...prev, spentCurrency: currencyCode, exchangeRate: rate };
      if (currencyCode === 'THB') {
        updated.foreignAmount = '';
        updated.exchangeRate = 1;
      } else {
        if (updated.foreignAmount) {
          updated.totalAmount = (parseFloat(updated.foreignAmount) * rate).toFixed(2);
        }
      }
      return updated;
    });
  };

  const handleTxForeignAmountChange = (val) => {
    setTxForm(prev => {
      const updated = { ...prev, foreignAmount: val };
      if (prev.spentCurrency !== 'THB' && val !== '') {
        updated.totalAmount = (parseFloat(val) * parseFloat(prev.exchangeRate)).toFixed(2);
      }
      return updated;
    });
  };

  const handleTxExchangeRateChange = (rateVal) => {
    setTxForm(prev => {
      const updated = { ...prev, exchangeRate: rateVal };
      if (prev.spentCurrency !== 'THB' && prev.foreignAmount !== '') {
        updated.totalAmount = (parseFloat(prev.foreignAmount) * parseFloat(rateVal)).toFixed(2);
      }
      return updated;
    });
  };

  const triggerOpenTxModal = (existingTxId = '') => {
    if (!currentActiveBillObj) return;
    
    const members = activeBillMembersList;
    const defaultPayer = currentUser && members.includes(currentUser.displayName) ? currentUser.displayName : members[0] || '';

    // Determine available currencies for this trip
    let currencies = [];
    const activeTrip = currentActiveBillObj;
    if (activeTrip.Currency_1) currencies.push({ code: activeTrip.Currency_1, rate: activeTrip.Exchange_Rate_1 });
    else if (activeTrip.Currency) currencies.push({ code: activeTrip.Currency, rate: activeTrip.Exchange_Rate });
    else currencies.push({ code: 'THB', rate: 1 });

    if (activeTrip.Currency_2 && activeTrip.Currency_2 !== 'NONE') {
      currencies.push({ code: activeTrip.Currency_2, rate: activeTrip.Exchange_Rate_2 });
    }
    if (activeTrip.Currency_3 && activeTrip.Currency_3 !== 'NONE') {
      currencies.push({ code: activeTrip.Currency_3, rate: activeTrip.Exchange_Rate_3 });
    }

    if (!currencies.some(c => c.code === 'THB')) {
      currencies.unshift({ code: 'THB', rate: 1 });
    }

    if (existingTxId) {
      const tx = cacheTransactions.find(t => t.Transaction_ID === existingTxId);
      if (tx) {
        let initialRatios = {};
        if (tx.Split_Type === 'กำหนดสัดส่วน') {
          const parts = tx.Split_Detail ? tx.Split_Detail.split(',') : [];
          parts.forEach(p => {
            const [name, val] = p.split(':');
            if (name && val) initialRatios[name.trim()] = val.trim();
          });
        }

        setTxForm({
          id: tx.Transaction_ID,
          description: tx.Description || '',
          spentCurrency: tx.Spent_Currency || 'THB',
          foreignAmount: tx.Foreign_Amount || '',
          exchangeRate: tx.Exchange_Rate || 1,
          totalAmount: tx.Total_Amount || '',
          date: tx.Transaction_Date || '',
          paidBy: tx.Paid_By || defaultPayer,
          splitType: tx.Split_Type || 'หารเท่า',
          splitTarget: tx.Split_Type === 'จ่ายเต็มจำนวน' ? tx.Split_Detail : (members[0] || ''),
          splitRatios: initialRatios,
          selectedFile: null,
          fileName: '',
          existingImg: tx.Image_URL || '',
          existingFileId: tx.File_ID || ''
        });
      }
    } else {
      setTxForm({
        id: '',
        description: '',
        spentCurrency: 'THB',
        foreignAmount: '',
        exchangeRate: 1,
        totalAmount: '',
        date: new Date().toISOString().split('T')[0],
        paidBy: defaultPayer,
        splitType: 'หารเท่า',
        splitTarget: members[0] || '',
        splitRatios: members.reduce((acc, name) => ({ ...acc, [name]: '1' }), {}),
        selectedFile: null,
        fileName: '',
        existingImg: '',
        existingFileId: ''
      });
    }
    setIsTxModalOpen(true);
  };

  const handleTxFileSelect = (e) => {
    const file = e.target.files[0];
    if (file) {
      setTxForm(prev => ({ ...prev, selectedFile: file, fileName: file.name }));
    }
  };

  const handleSaveTransaction = async (e) => {
    e.preventDefault();
    if (!txForm.description || !txForm.totalAmount) {
      showToast('กรุณากรอกหัวข้อรายการและจำนวนเงินบาทนะค้า', 'error');
      return;
    }

    setIsLoading(true);
    setLoadingText('กำลังอัปโหลดข้อมูลและบันทึกบิลย่อย...');
    try {
      let finalImgUrl = txForm.existingImg;
      let finalFileId = txForm.existingFileId;

      if (txForm.selectedFile) {
        const base64 = await new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => resolve(reader.result);
          reader.onerror = reject;
          reader.readAsDataURL(txForm.selectedFile);
        });

        if (txForm.id && txForm.existingFileId) {
          await fetch(DRIVE_GAS_URL, { 
            method: 'POST', 
            body: JSON.stringify({ action: 'deleteImage', fileId: txForm.existingFileId }) 
          }).catch(() => {});
        }

        const tempIdForFile = txForm.id || 'T' + Date.now().toString().slice(-6);
        const res = await fetch(DRIVE_GAS_URL, {
          method: 'POST',
          body: JSON.stringify({ action: 'uploadImage', base64, filename: `receipt_${tempIdForFile}.jpg` })
        });
        const uploadRes = await res.json();
        if (!uploadRes.success) throw new Error(uploadRes.error);

        finalImgUrl = uploadRes.data.url;
        finalFileId = uploadRes.data.fileId;
      }

      let detail = 'ทุกคน';
      if (txForm.splitType === 'จ่ายเต็มจำนวน') {
        detail = txForm.splitTarget;
      } else if (txForm.splitType === 'กำหนดสัดส่วน') {
        const parts = [];
        for (let m in txForm.splitRatios) {
          const val = parseFloat(txForm.splitRatios[m]) || 0;
          if (val > 0) parts.push(`${m}:${val}`);
        }
        detail = parts.join(', ');
        if (!detail) throw new Error('ต้องมีเพื่อนร่วมแชร์ค่าใช้จ่ายอย่างน้อยหนึ่งคนนะค้า');
      }

      const txId = txForm.id || 'T' + Date.now().toString().slice(-6);
      const transactionData = {
        Transaction_ID: txId,
        Bill_ID: currentActiveBillId,
        Transaction_Date: txForm.date,
        Description: txForm.description,
        Total_Amount: parseFloat(txForm.totalAmount) || 0,
        Foreign_Amount: txForm.spentCurrency !== 'THB' ? parseFloat(txForm.foreignAmount) || 0 : 0,
        Exchange_Rate: txForm.spentCurrency !== 'THB' ? parseFloat(txForm.exchangeRate) || 1 : 1,
        Spent_Currency: txForm.spentCurrency,
        Paid_By: txForm.paidBy,
        Split_Type: txForm.splitType,
        Split_Detail: detail,
        Image_URL: finalImgUrl,
        File_ID: finalFileId
      };

      await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Transactions', txId), transactionData, { merge: true });
      showToast(txForm.id ? 'แก้ไขรายการจ่ายสำเร็จแล้วค่ะ ✏️' : 'บันทึกรายการจ่ายเรียบร้อย! ⚡');
      setIsTxModalOpen(false);
    } catch (e) {
      showToast(e.message, 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const handleDeleteTransaction = (txId, fileId) => {
    triggerConfirm('ลบรายการใช้จ่าย', 'ยืนยันที่จะลบรายการนี้นะค้า? (สลิปเดิมในระบบ Google Drive จะถูกย้ายไปถังขยะอัตโนมัติด้วย)', async () => {
      setIsLoading(true);
      setLoadingText('กำลังนำรายการออกจากระบบ...');
      try {
        if (fileId && fileId !== 'null' && fileId !== 'undefined') {
          await fetch(DRIVE_GAS_URL, {
            method: 'POST',
            body: JSON.stringify({ action: 'deleteImage', fileId })
          }).catch(() => {});
        }
        await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Transactions', txId));
        showToast('ลบรายการใช้จ่ายเรียบร้อย');
      } catch (e) {
        showToast(e.message, 'error');
      } finally {
        setIsLoading(false);
      }
    });
  };

  const handleDeleteCurrentBill = () => {
    if (!currentActiveBillId) return;
    triggerConfirm('🚨 ลบข้อมูลทริปถาวร', 'คุณกำลังจะลบทริปนี้ทิ้งอย่างถาวร (รวมถึงรายการจ่ายและสลิปทั้งหมด) ยืนยันหรือไม่?', async () => {
      setIsLoading(true);
      setLoadingText('กำลังลบข้อมูลทริปถาวร...');
      try {
        const txsToDelete = cacheTransactions.filter(t => t.Bill_ID === currentActiveBillId);
        for (let tx of txsToDelete) {
          if (tx.File_ID) {
            await fetch(DRIVE_GAS_URL, {
              method: 'POST',
              body: JSON.stringify({ action: 'deleteImage', fileId: tx.File_ID })
            }).catch(() => {});
          }
          await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Transactions', tx.Transaction_ID));
        }

        const permsToDelete = cachePermissions.filter(p => p.Bill_ID === currentActiveBillId);
        for (let p of permsToDelete) {
          await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Permissions', `${p.Bill_ID}_${p.Username}`));
        }

        await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Bills', currentActiveBillId));
        setCurrentActiveBillId(null);
        setCurrentScreen('dashboard');
        showToast('ลบทริปและข้อมูลที่เกี่ยวข้องถาวรแล้วค่ะ');
      } catch (e) {
        showToast(e.message, 'error');
      } finally {
        setIsLoading(false);
      }
    });
  };

  const handleGenerateShareLink = async () => {
    if (!currentActiveBillId) return;
    setIsLoading(true);
    setLoadingText('กำลังสร้างลิงก์สำหรับเพื่อนภายนอก...');
    try {
      const key = Math.random().toString(36).substring(2, 8);
      await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Bills', currentActiveBillId), { Share_Key: key });
      showToast('สร้างลิงก์แชร์ส่วนตัวสำเร็จและคัดลอกลงคลิปบอร์ดแล้วจ้า! 🔗');
    } catch (e) {
      showToast('ไม่สามารถสร้างลิงก์แชร์ได้ในขณะนี้', 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const handleCopyShareLink = (link) => {
    const el = document.createElement('textarea');
    el.value = link;
    document.body.appendChild(el);
    el.select();
    document.execCommand('copy');
    document.body.removeChild(el);
    showToast('คัดลอกลิงก์แชร์แล้วจ้า! 🔗');
  };

  const activeBillPermissionsList = useMemo(() => {
    if (!currentActiveBillObj) return [];
    const members = currentActiveBillObj.Members ? currentActiveBillObj.Members.split(',').map(m => m.trim()) : [];
    
    return cacheUsers.filter(u => {
      const isSelfAdmin = (u.Display_Name === 'เม' || u.Username === 'maywuru');
      if (isSelfAdmin) return true;
      if (members.includes(u.Display_Name) && u.Allow_Login === 'Yes') return true;
      return false;
    });
  }, [currentActiveBillObj, cacheUsers]);

  const [localPermissions, setLocalPermissions] = useState({}); // { username: { canSee, role } }

  const triggerOpenPermissionModal = () => {
    const initialPerms = {};
    activeBillPermissionsList.forEach(u => {
      const p = cachePermissions.find(x => x.Bill_ID === currentActiveBillId && x.Username === u.Username) || {};
      initialPerms[u.Username] = {
        canSee: p.Can_See || 'Yes',
        role: p.Access_Role || 'Self Editor'
      };
    });
    setLocalPermissions(initialPerms);
    setIsPermissionModalOpen(true);
  };

  const handleSavePermissions = async () => {
    setIsLoading(true);
    setLoadingText('กำลังบันทึกการตั้งค่าสิทธิ์เข้าถึง...');
    try {
      for (let username in localPermissions) {
        const docId = `${currentActiveBillId}_${username}`;
        await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Permissions', docId), {
          Bill_ID: currentActiveBillId,
          Username: username,
          Can_See: localPermissions[username].canSee,
          Access_Role: localPermissions[username].role
        }, { merge: true });
      }
      showToast('อัปเดตสิทธิ์รายทริปเรียบร้อยแล้วจ้า 🛡️');
      setIsPermissionModalOpen(false);
    } catch (e) {
      showToast('ไม่สามารถบันทึกสิทธิ์ได้: ' + e.message, 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const triggerOpenUserPermissionModal = (displayName) => {
    const userObj = cacheUsers.find(u => u.Display_Name === displayName);
    if (!userObj) return;

    setSelectedUserPermissionName(displayName);
    const initialPerms = {};
    cacheBills.forEach(b => {
      const p = cachePermissions.find(x => x.Bill_ID === b.Bill_ID && x.Username === userObj.Username) || {};
      const isMember = b.Members ? b.Members.split(',').map(m => m.trim()).includes(displayName) : false;
      initialPerms[b.Bill_ID] = {
        canSee: p.Can_See || (isMember ? 'Yes' : 'No'),
        role: p.Access_Role || (isMember ? 'Self Editor' : 'Viewer')
      };
    });
    setLocalPermissions(initialPerms);
    setIsUserPermissionModalOpen(true);
  };

  const handleSaveUserPermissions = async () => {
    const userObj = cacheUsers.find(u => u.Display_Name === selectedUserPermissionName);
    if (!userObj) return;

    setIsLoading(true);
    setLoadingText('กำลังอัปเดตสิทธิ์ผู้ใช้รายบุคคล...');
    try {
      for (let billId in localPermissions) {
        const docId = `${billId}_${userObj.Username}`;
        await setDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Permissions', docId), {
          Bill_ID: billId,
          Username: userObj.Username,
          Can_See: localPermissions[billId].canSee,
          Access_Role: localPermissions[billId].role
        }, { merge: true });
      }
      showToast(`อัปเดตสิทธิ์เข้าถึงทั้งหมดของ ${selectedUserPermissionName} สำเร็จ 🛡️`);
      setIsUserPermissionModalOpen(false);
    } catch (e) {
      showToast('เกิดข้อผิดพลาดในการบันทึกสิทธิ์', 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const handleUnlockUserAccount = (displayName) => {
    triggerConfirm('ปลดล็อกบัญชีเพื่อน', `คุณต้องการปลดล็อกการเข้าสู่ระบบและรีเซ็ตประวัติสำหรับ "${displayName}" ใช่หรือไม่?`, async () => {
      setIsLoading(true);
      setLoadingText('กำลังทำการปลดล็อกบัญชีผู้ใช้...');
      try {
        await updateDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Users', displayName), {
          Status: 'Active',
          Failed_Attempts: 0
        });
        showToast(`ปลดล็อกบัญชีของ "${displayName}" เรียบร้อยแล้วค่ะ! 🔓`);
      } catch (e) {
        showToast('ไม่สามารถทำรายการได้ในขณะนี้', 'error');
      } finally {
        setIsLoading(false);
      }
    });
  };

  const triggerOpenMemberModal = (name = '') => {
    if (name) {
      const u = cacheUsers.find(x => x.Display_Name === name);
      if (u) {
        setMemberForm({
          originalName: u.Display_Name,
          displayName: u.Display_Name,
          avatar: u.Avatar || 'F1.png',
          allowLogin: u.Allow_Login || 'No',
          username: u.Username || '',
          password: u.Password || ''
        });
      }
    } else {
      setMemberForm({
        originalName: '',
        displayName: '',
        avatar: 'F1.png',
        allowLogin: 'No',
        username: '',
        password: ''
      });
    }
    setIsMemberModalOpen(true);
  };

  const handleSaveMember = async (e) => {
    e.preventDefault();
    if (!memberForm.displayName) {
      showToast('กรุณากรอกชื่อเรียกของเพื่อนนะค้า', 'error');
      return;
    }
    if (memberForm.allowLogin === 'Yes' && (!memberForm.username || !memberForm.password)) {
      showToast('กรุณากรอก Username และ Password สลับสำหรับบัญชีด้วยค่ะ', 'error');
      return;
    }

    setIsLoading(true);
    setLoadingText('กำลังส่งข้อมูลสมาชิกบันทึกไปยังเซิร์ฟเวอร์...');
    try {
      const isEdit = memberForm.originalName !== '';
      const docRef = doc(db, 'artifacts', appId, 'public', 'data', 'Users', memberForm.displayName);

      if (isEdit) {
        if (memberForm.originalName !== memberForm.displayName) {
          const duplicate = cacheUsers.find(u => u.Display_Name.toLowerCase() === memberForm.displayName.toLowerCase());
          if (duplicate) throw new Error('ชื่อเพื่อนคนนี้ซ้ำกับผู้อื่นในระบบ');

          const oldUser = cacheUsers.find(u => u.Display_Name === memberForm.originalName);
          await setDoc(docRef, {
            Display_Name: memberForm.displayName,
            Allow_Login: memberForm.allowLogin,
            Username: memberForm.username,
            Password: memberForm.password,
            Status: oldUser?.Status || 'Active',
            Failed_Attempts: oldUser?.Failed_Attempts || 0,
            Avatar: memberForm.avatar
          });

          await deleteDoc(doc(db, 'artifacts', appId, 'public', 'data', 'Users', memberForm.originalName));

          if (currentUser?.displayName === memberForm.originalName) {
            const updatedUser = { ...currentUser, displayName: memberForm.displayName };
            setCurrentUser(updatedUser);
            localStorage.setItem('splitbill_user', JSON.stringify(updatedUser));
          }
        } else {
          await updateDoc(docRef, {
            Allow_Login: memberForm.allowLogin,
            Username: memberForm.username,
            Password: memberForm.password,
            Avatar: memberForm.avatar
          });
        }
      } else {
        const duplicate = cacheUsers.find(u => u.Display_Name.toLowerCase() === memberForm.displayName.toLowerCase());
        if (duplicate) throw new Error('ชื่อเพื่อนคนนี้ซ้ำกับคนในระบบจ้า');

        await setDoc(docRef, {
          Display_Name: memberForm.displayName,
          Allow_Login: memberForm.allowLogin,
          Username: memberForm.username,
          Password: memberForm.password,
          Status: 'Active',
          Failed_Attempts: 0,
          Avatar: memberForm.avatar
        });
      }

      showToast('บันทึกข้อมูลเพื่อนสำเร็จเรียบร้อยค่ะ 🐾');
      setIsMemberModalOpen(false);
    } catch (e) {
      showToast(e.message, 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const triggerOpenProfileModal = () => {
    if (!dbCurrentUserObj) return;
    setProfileForm({
      avatar: dbCurrentUserObj.Avatar || 'F1.png',
      newPassword: '',
      showPassword: false
    });
    setIsProfileModalOpen(true);
  };

  const handleSavePersonalProfile = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    setLoadingText('กำลังบันทึกประวัติส่วนตัวของคุณ...');
    try {
      const userDocRef = doc(db, 'artifacts', appId, 'public', 'data', 'Users', dbCurrentUserObj.Display_Name);
      const updates = { Avatar: profileForm.avatar };
      if (profileForm.newPassword) {
        updates.Password = profileForm.newPassword;
      }
      await updateDoc(userDocRef, updates);
      showToast('บันทึกรูปประจำตัวและข้อมูลของคุณเรียบร้อย! 🐹🌟');
      setIsProfileModalOpen(false);
    } catch (e) {
      showToast('การบันทึกโปรไฟล์ส่วนตัวขัดข้อง', 'error');
    } finally {
      setIsLoading(false);
    }
  };

  const handleCalcInputPress = (char) => {
    if (char === 'C') {
      setCalcExpression('');
      setCalcCurrentInput('0');
      setCalcJustEvaluated(false);
    } else if (char === '⌫') {
      if (calcCurrentInput.length > 1) {
        setCalcCurrentInput(calcCurrentInput.slice(0, -1));
      } else {
        setCalcCurrentInput('0');
      }
      setCalcJustEvaluated(false);
    } else if (['+', '-', '*', '/', '%'].includes(char)) {
      if (calcJustEvaluated) {
        setCalcExpression(calcCurrentInput + ' ' + char + ' ');
        setCalcJustEvaluated(false);
      } else {
        if (calcCurrentInput !== '0') {
          setCalcExpression(prev => prev + calcCurrentInput + ' ' + char + ' ');
        } else if (calcExpression !== '') {
          setCalcExpression(calcExpression.slice(0, -3) + ' ' + char + ' ');
        }
      }
      setCalcCurrentInput('0');
    } else if (char === '=') {
      let fullExpr = calcExpression + calcCurrentInput;
      let sanitized = fullExpr.replace(/[^0-9+\-*/%.]/g, '');
      try {
        let result = new Function(`return (${sanitized})`)();
        if (result === undefined || isNaN(result) || !isFinite(result)) {
          setCalcCurrentInput('Error');
        } else {
          setCalcCurrentInput(parseFloat(result.toFixed(2)).toString());
        }
        setCalcExpression(fullExpr + ' =');
        setCalcJustEvaluated(true);
      } catch (e) {
        setCalcCurrentInput('Error');
        setCalcJustEvaluated(true);
      }
    } else if (char === '.') {
      if (!calcCurrentInput.includes('.')) {
        setCalcCurrentInput(prev => prev + '.');
      }
      setCalcJustEvaluated(false);
    } else {
      if (calcCurrentInput === '0' || calcJustEvaluated) {
        setCalcCurrentInput(char);
        setCalcJustEvaluated(false);
      } else {
        setCalcCurrentInput(prev => prev + char);
      }
    }
  };

  const handleApplyCalcResult = () => {
    if (isTxModalOpen) {
      const activeElement = document.activeElement;
      if (activeElement && activeElement.id === 'tx-foreign-amount') {
        handleTxForeignAmountChange(calcCurrentInput);
      } else {
        setTxForm(prev => ({ ...prev, totalAmount: calcCurrentInput }));
      }
      showToast(`นำผลลัพธ์ ฿${calcCurrentInput} ไปกรอกเรียบร้อย!`);
    }
    setIsCalcOpen(false);
  };

  const filteredMembersList = useMemo(() => {
    return cacheUsers.filter(u => {
      if (!u.Display_Name) return false;
      if (searchMembersQuery.trim()) {
        return u.Display_Name.toLowerCase().includes(searchMembersQuery.toLowerCase());
      }
      return true;
    });
  }, [cacheUsers, searchMembersQuery]);

  return (
    <div className="min-h-screen bg-[#FCF9F6] text-[#6D5E58] font-sans antialiased selection:bg-[#A6C8E0] selection:text-white pb-20 relative overflow-x-hidden">
      
      {/* Background Decorators */}
      <div className="fixed inset-0 pointer-events-none z-0 overflow-hidden">
        <div className="absolute top-[5%] left-[8%] text-3xl opacity-[0.25]">🐹</div>
        <div className="absolute top-[12%] right-[10%] text-2xl opacity-[0.25]">✨</div>
        <div className="absolute top-[25%] left-[15%] text-4xl opacity-[0.20]">🌸</div>
        <div className="absolute top-[35%] right-[18%] text-3xl opacity-[0.25]">🐰</div>
        <div className="absolute top-[50%] left-[6%] text-3xl opacity-[0.20]">🐻</div>
        <div className="absolute top-[62%] right-[8%] text-4xl opacity-[0.25]">🐱</div>
        <div className="absolute top-[75%] left-[12%] text-3xl opacity-[0.25]">🌸</div>
        <div className="absolute top-[88%] right-[15%] text-4xl opacity-[0.20]">✨</div>
        
        <div className="absolute top-[18%] left-[45%] text-3xl opacity-[0.20]">🌸</div>
        <div class="absolute top-[45%] right-[42%] text-3xl opacity-[0.18]">🐨</div>
        <div class="absolute top-[70%] left-[40%] text-4xl opacity-[0.22]">🐼</div>
        <div class="absolute bottom-[8%] left-[28%] text-3xl opacity-[0.20]">🌸</div>
        <div class="absolute top-[30%] left-[82%] text-3xl opacity-[0.20]">🦊</div>
        <div class="absolute top-[55%] left-[22%] text-3xl opacity-[0.18]">🐨</div>
        <div class="absolute top-[80%] right-[35%] text-2xl opacity-[0.25]">✨</div>
        <div class="absolute bottom-[15%] right-[48%] text-3xl opacity-[0.20]">🌸</div>

        <div className="absolute top-[-10%] left-[-10%] w-72 h-72 bg-[#F6B896]/30 rounded-full mix-blend-multiply blur-3xl opacity-60"></div>
        <div className="absolute bottom-[-10%] right-[-10%] w-72 h-72 bg-[#A6C8E0]/30 rounded-full mix-blend-multiply blur-3xl opacity-60"></div>
      </div>

      {/* Loading Overlay */}
      {isLoading && (
        <div className="fixed inset-0 bg-white/80 z-[100] flex flex-col justify-center items-center backdrop-blur-sm">
          <div className="w-12 h-12 rounded-full border-4 border-[#F6B896] border-t-[#A6C8E0] animate-spin mb-4" />
          <p className="text-[#A6C8E0] font-bold animate-pulse">{loadingText}</p>
        </div>
      )}

      {/* Custom Toast Alert */}
      {toast.visible && (
        <div className="fixed top-5 left-1/2 transform -translate-x-1/2 z-[110] transition-all duration-300">
          <div className={`px-6 py-3 font-bold text-center border-2 rounded-full shadow-lg ${
            toast.type === 'error' 
              ? 'bg-[#E57A7A] text-white border-[#D96B6B]' 
              : 'bg-[#A6C8E0] text-white border-[#8FB4CE]'
          }`}>
            {toast.type === 'error' ? <AlertTriangle className="inline mr-2 w-4 h-4" /> : <Check className="inline mr-2 w-4 h-4" />}
            {toast.message}
          </div>
        </div>
      )}

      {/* Custom Confirm Modal */}
      {confirmDialog.visible && (
        <div className="fixed inset-0 bg-[#6D5E58]/40 z-[120] flex justify-center items-center p-4 backdrop-blur-sm">
          <div className="bg-white rounded-[30px] w-full max-w-sm p-6 border-4 border-[#F6B896]/20 shadow-2xl text-center animate-bounce-in">
            <div className="w-16 h-16 bg-rose-50 rounded-full flex items-center justify-center mx-auto mb-4 text-rose-500 text-2xl">
              <AlertTriangle className="w-8 h-8 animate-bounce" />
            </div>
            <h4 className="text-lg font-bold text-[#6D5E58] mb-2">{confirmDialog.title}</h4>
            <p className="text-sm text-[#A89F9A] mb-6">{confirmDialog.message}</p>
            <div className="flex gap-3 justify-center">
              <button 
                onClick={() => setConfirmDialog(prev => ({ ...prev, visible: false }))} 
                className="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-xl font-bold text-[#A89F9A] transition-colors"
              >
                ยกเลิก
              </button>
              <button 
                onClick={() => {
                  if (confirmDialog.onConfirm) confirmDialog.onConfirm();
                  setConfirmDialog(prev => ({ ...prev, visible: false }));
                }} 
                className="px-5 py-2.5 bg-rose-500 hover:bg-rose-600 text-white rounded-xl font-bold shadow-md transition-colors"
              >
                ยืนยัน
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ==================== Header ==================== */}
      {currentUser && currentScreen !== 'login' && (
        <header className="bg-white/90 backdrop-blur-md sticky top-0 z-30 border-b-2 border-[#A6C8E0]/20 shadow-sm rounded-b-[30px]">
          <div className="max-w-3xl mx-auto px-4 py-3 flex justify-between items-center relative z-10">
            <div className="flex items-center space-x-4">
              <img 
                src="All Friend.png" 
                alt="App Logo" 
                className="w-11 h-11 rounded-full shadow-md border-2 border-white cursor-pointer hover:scale-105 transition-transform object-cover"
                onClick={() => { setCurrentScreen('dashboard'); setCurrentActiveBillId(null); }}
                onError={(e) => { e.target.src = 'https://placehold.co/150/F2F7F9/9BBFD4?text=WuRu'; }}
              />
              <div 
                className="flex items-center space-x-3 cursor-pointer hover:scale-105 transition-transform"
                onClick={triggerOpenProfileModal}
              >
                <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-[#A6C8E0] to-[#F6B896] flex items-center justify-center text-white font-bold shadow-md border-2 border-white overflow-hidden">
                  <img src={userAvatarUrl} alt="Avatar" className="w-full h-full object-cover" />
                </div>
                <div>
                  <p className="font-bold text-[#6D5E58] leading-tight flex items-center">{currentUser.displayName}</p>
                  <p className="text-[10px] bg-[#A6C8E0]/10 text-[#A6C8E0] px-2 rounded-full inline-block mt-0.5 font-semibold">
                    {currentUser.isAdmin ? 'Admin' : 'Member'}
                  </p>
                </div>
              </div>
            </div>

            <div className="flex space-x-2">
              {currentUser.isAdmin && (
                <button 
                  onClick={() => setCurrentScreen('members')} 
                  className="text-[#6D5E58] hover:text-[#A6C8E0] transition-colors w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#A6C8E0]/10"
                >
                  <Users className="w-5 h-5" />
                </button>
              )}
              <button 
                onClick={handleLogout} 
                className="text-[#F6B896] hover:text-[#E5A582] transition-colors w-10 h-10 rounded-full flex items-center justify-center hover:bg-[#F6B896]/10"
              >
                <LogOut className="w-5 h-5" />
              </button>
            </div>
          </div>
        </header>
      )}

      {/* ==================== Screen Routing ==================== */}
      <main className="max-w-3xl mx-auto px-4 py-6 relative z-10">
        
        {/* LOGIN SCREEN */}
        {currentScreen === 'login' && (
          <div className="flex flex-col justify-center items-center min-h-[80vh]">
            <div className="w-full max-w-md bg-white rounded-[40px] shadow-xl p-8 border-4 border-white relative">
              <div className="text-center mb-6">
                <img 
                  src="All Friend.png" 
                  alt="Logo" 
                  className="w-80 h-80 mx-auto mb-2 object-contain drop-shadow-md max-w-full"
                  onError={(e) => { e.target.src = 'https://placehold.co/150/F2F7F9/9BBFD4?text=WuRu'; }}
                />
                <h1 className="text-2xl font-bold text-[#6D5E58] mt-2">WuRu Bills</h1>
                <p className="text-[#A6C8E0] font-bold text-sm mt-1 tracking-wide">✨ Powered by WuRu lab ✨</p>
              </div>
              
              <form onSubmit={handleLoginSubmit} className="space-y-4">
                <div>
                  <label className="block text-sm font-semibold mb-1 ml-1 text-[#6D5E58]">ชื่อผู้ใช้ (Username / ชื่อเรียก)</label>
                  <div className="relative">
                    <User className="absolute left-4 top-4 text-[#F6B896] w-5 h-5" />
                    <input 
                      type="text" 
                      required 
                      value={usernameInput}
                      onChange={(e) => setUsernameInput(e.target.value)}
                      className="w-full pl-11 pr-4 py-3 border-2 border-[#F6B896]/20 rounded-2xl bg-[#F6B896]/5 focus:bg-white focus:border-[#F6B896] outline-none font-medium text-[#6D5E58] placeholder-[#A89F9A]/60 transition-colors" 
                      placeholder="ใส่ชื่อผู้ใช้หรือชื่อเรียกตรงนี้น้า"
                    />
                  </div>
                </div>
                
                <div>
                  <label className="block text-sm font-semibold mb-1 ml-1 text-[#6D5E58]">รหัสผ่าน (Password)</label>
                  <div className="relative">
                    <Lock className="absolute left-4 top-4 text-[#A6C8E0] w-5 h-5" />
                    <input 
                      type={showLoginPassword ? "text" : "password"}
                      required 
                      value={passwordInput}
                      onChange={(e) => setPasswordInput(e.target.value)}
                      className="w-full pl-11 pr-12 py-3 border-2 border-[#A6C8E0]/20 rounded-2xl bg-[#A6C8E0]/5 focus:bg-white focus:border-[#A6C8E0] outline-none font-medium text-[#6D5E58] placeholder-[#A89F9A]/60 transition-colors" 
                      placeholder="รหัสผ่านลับสุดยอด"
                    />
                    <button 
                      type="button" 
                      onClick={() => setShowLoginPassword(!showLoginPassword)} 
                      className="absolute right-4 top-3.5 text-[#A89F9A] hover:text-[#6D5E58] transition-colors w-8 h-8 flex items-center justify-center"
                    >
                      {showLoginPassword ? <EyeOff className="w-5 h-5 text-[#A6C8E0]/60" /> : <Eye className="w-5 h-5 text-[#A6C8E0]/60" />}
                    </button>
                  </div>
                </div>

                <button 
                  type="submit" 
                  className="w-full py-4 mt-6 rounded-2xl font-bold text-white bg-gradient-to-r from-[#F6B896] to-[#A6C8E0] hover:opacity-95 shadow-lg shadow-[#A6C8E0]/20 hover:scale-[1.02] active:scale-[0.98] transition-all text-lg flex justify-center items-center"
                >
                  เข้าสู่ระบบเลย! 🐾
                </button>
              </form>
            </div>
          </div>
        )}

        {/* DASHBOARD SCREEN */}
        {currentScreen === 'dashboard' && (
          <div>
            <div className="flex justify-between items-end mb-6 bg-white/70 p-5 rounded-3xl border-2 border-white backdrop-blur-sm shadow-sm flex-wrap gap-4 animate-fade-in">
              <div>
                <h2 className="text-xl font-bold flex items-center text-[#6D5E58]">
                  <Sparkles className="text-[#A6C8E0] mr-2 w-5 h-5 animate-pulse" /> ทริปและบิลของเรา
                </h2>
                <p className="text-sm text-[#A89F9A] mt-1">สรุปยอดที่ต้องเคลียร์ให้เพื่อนๆ</p>
              </div>
              <button 
                onClick={() => { showToast('อัปเดตข้อมูลทริปเรียลไทม์สำเร็จแล้วจ้า 🐹'); }} 
                className="text-[#A6C8E0] bg-[#A6C8E0]/10 hover:bg-[#A6C8E0]/20 px-4 py-2 rounded-full text-sm font-bold transition-colors flex items-center"
              >
                <RotateCw className="w-4 h-4 mr-1.5" /> รีเฟรช
              </button>
            </div>

            {/* Search and Sort Filter Header */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-4 bg-white/50 p-4 rounded-3xl border-2 border-white backdrop-blur-sm shadow-sm">
              <div className="relative">
                <Search className="absolute left-3 top-3.5 text-[#A89F9A] w-4 h-4" />
                <input 
                  type="text" 
                  value={searchBillsQuery}
                  onChange={(e) => setSearchBillsQuery(e.target.value)}
                  className="w-full pl-9 pr-4 py-2.5 border-2 border-gray-100 rounded-xl outline-none text-sm font-medium focus:border-[#A6C8E0] bg-white transition-colors" 
                  placeholder="ค้นหาชื่อทริป..."
                />
              </div>
              <div>
                <select 
                  value={sortBillsBy}
                  onChange={(e) => setSortBillsBy(e.target.value)}
                  className="w-full px-3 py-2.5 border-2 border-gray-100 rounded-xl outline-none text-sm font-bold text-[#6D5E58] bg-white focus:border-[#A6C8E0] transition-colors cursor-pointer"
                >
                  <option value="newest">📅 วันที่เริ่ม: ใหม่ล่าสุด ➡️ เก่าสุด</option>
                  <option value="oldest">📅 วันที่เริ่ม: เก่าสุด ➡️ ใหม่ล่าสุด</option>
                  <option value="name_asc">🔤 ชื่อทริป: A ➡️ Z</option>
                  <option value="name_desc">🔤 ชื่อทริป: Z ➡️ A</option>
                </select>
              </div>
            </div>

            {/* Admin toggle filter old trips */}
            {currentUser?.isAdmin && (
              <div className="mb-4 p-4 bg-white/70 rounded-3xl border-2 border-white backdrop-blur-sm flex items-center justify-between shadow-sm">
                <span className="text-xs font-bold text-[#6D5E58] flex items-center">
                  <Coins className="text-[#A6C8E0] mr-2 w-4 h-4" /> ทริปเก่าเคลียร์แล้ว (&gt; 5 เดือน)
                </span>
                <label className="relative inline-flex items-center cursor-pointer">
                  <input 
                    type="checkbox" 
                    checked={filterOldTrips}
                    onChange={(e) => setFilterOldTrips(e.target.checked)}
                    className="sr-only peer" 
                  />
                  <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#F6B896]"></div>
                </label>
              </div>
            )}

            {/* Trip Cards Grid */}
            <div className="space-y-4">
              {sortedAndFilteredBills.map(b => {
                const isCleared = b.Status === 'เคลียร์แล้ว' || b.Status === 'สำเร็จแล้ว';
                
                // Fetch dynamic role
                let myRole = 'Viewer';
                if (currentUser.isAdmin || currentUser.displayName === 'เม' || currentUser.username === 'maywuru') {
                  myRole = 'Admin';
                } else {
                  const p = cachePermissions.find(x => x.Bill_ID === b.Bill_ID && x.Username === currentUser.username);
                  if (p && p.Access_Role) myRole = p.Access_Role;
                  else if (b.Members && b.Members.split(',').map(m => m.trim()).includes(currentUser.displayName)) {
                    myRole = 'Self Editor';
                  }
                }

                const dateText = b.End_Date ? `${b.Start_Date} - ${b.End_Date}` : b.Start_Date;

                // Build Multi-currency tags
                let activeCurrencies = [];
                if (b.Currency_1) activeCurrencies.push(b.Currency_1);
                else if (b.Currency) activeCurrencies.push(b.Currency);
                else activeCurrencies.push('THB');

                if (b.Currency_2 && b.Currency_2 !== 'NONE') activeCurrencies.push(b.Currency_2);
                if (b.Currency_3 && b.Currency_3 !== 'NONE') activeCurrencies.push(b.Currency_3);

                return (
                  <div 
                    key={b.Bill_ID}
                    onClick={() => {
                      setCurrentActiveBillId(b.Bill_ID);
                      setCurrentActiveBillRole(myRole);
                      setCurrentScreen('bill-detail');
                      setBillTab('tx');
                    }}
                    className="bg-white border-2 border-[#A6C8E0]/20 rounded-[24px] p-5 shadow-sm hover:shadow-md hover:scale-[1.01] cursor-pointer active:scale-[0.99] transition-all relative overflow-hidden group"
                  >
                    <Star className="absolute -right-4 -bottom-4 w-24 h-24 text-[#A6C8E0]/5 group-hover:scale-110 transition-transform" />
                    <div className="flex justify-between items-start mb-4 relative z-10">
                      <div className="pr-2">
                        <h3 className="font-bold text-lg text-[#6D5E58] flex items-center">
                          <Star className="text-[#FDE093] fill-[#FDE093] mr-2 w-5 h-5 drop-shadow-sm" /> 
                          {b.Bill_Name}
                        </h3>
                        <div className="flex items-center text-xs text-[#A89F9A] mt-2 font-medium bg-[#A6C8E0]/5 inline-flex px-2 py-1 rounded-md">
                          <Calendar className="mr-1.5 text-[#A6C8E0] w-3.5 h-3.5" /> {dateText}
                        </div>
                        <div className="flex flex-wrap mt-2 gap-1">
                          {activeCurrencies.map(c => (
                            <span key={c} className="text-[9px] bg-[#A6C8E0]/20 text-[#6D5E58] font-bold px-1.5 py-0.5 rounded-md flex items-center">
                              <Globe className="w-2.5 h-2.5 mr-0.5" /> {c}
                            </span>
                          ))}
                        </div>
                      </div>
                      
                      <div className={`shrink-0 flex items-center px-3 py-1.5 rounded-full text-[11px] font-bold border ${
                        isCleared 
                          ? 'bg-green-100 text-green-600 border-green-200' 
                          : 'bg-rose-100 text-rose-500 border-rose-200'
                      }`}>
                        <div className={`w-2 h-2 rounded-full mr-1.5 animate-pulse ${isCleared ? 'bg-green-500' : 'bg-rose-400'}`} />
                        {b.Status || 'เปิดอยู่'}
                      </div>
                    </div>

                    <div className="flex justify-between items-center pt-3 border-t-2 border-dashed border-[#A6C8E0]/10 relative z-10">
                      <span className="text-xs font-bold bg-[#F6B896]/10 px-3 py-1.5 rounded-xl text-[#6D5E58] flex items-center">
                        <Users className="text-[#F6B896] mr-1.5 w-4 h-4" /> {b.Members ? b.Members.split(',').length : 0} คน
                      </span>
                      <span className="text-[10px] text-[#A89F9A] font-medium bg-gray-50 px-2 py-1 rounded-lg">
                        สิทธิ์เข้าแก้ไข: {myRole}
                      </span>
                    </div>
                  </div>
                );
              })}

              {sortedAndFilteredBills.length === 0 && (
                <div className="text-center py-12 bg-white/70 rounded-[30px] border-2 border-dashed border-[#A6C8E0]/30 mt-4 backdrop-blur-sm shadow-sm">
                  <div className="w-20 h-20 bg-[#A6C8E0]/10 rounded-full flex items-center justify-center mx-auto mb-3 text-4xl text-[#A6C8E0]">
                    <PiggyBank className="w-10 h-10" />
                  </div>
                  <p className="font-bold text-[#6D5E58] text-lg">ยังไม่มีทริปหรือบิลเลยยย</p>
                  <p className="text-sm text-[#A89F9A] mt-1">กดปุ่ม + ด้านล่างเพื่อเปิดบิลใหม่ได้เลยนะ!</p>
                </div>
              )}
            </div>

            {/* FAB Float add bill */}
            {currentUser?.isAdmin && (
              <button 
                onClick={() => triggerOpenBillModal()} 
                className="fixed bottom-6 right-6 w-16 h-16 bg-[#A6C8E0] text-white rounded-full shadow-[0_8px_20px_rgba(155,191,212,0.5)] flex items-center justify-center text-2xl hover:scale-105 active:scale-95 transition-transform z-40 border-4 border-white"
              >
                <Plus className="w-8 h-8" />
              </button>
            )}
          </div>
        )}

        {/* BILL DETAILS SCREEN */}
        {currentScreen === 'bill-detail' && currentActiveBillObj && (
          <div className="animate-fade-in">
            <button 
              onClick={() => { setCurrentScreen('dashboard'); setCurrentActiveBillId(null); }}
              className="mb-4 text-[#A6C8E0] font-bold hover:text-[#8FB4CE] transition-colors flex items-center bg-white/50 px-3 py-1.5 rounded-full backdrop-blur-sm shadow-sm"
            >
              <ArrowLeft className="w-4 h-4 mr-2" /> กลับหน้าหลัก
            </button>

            {/* Bill Header Info Card */}
            <div className="bg-white rounded-[30px] p-6 shadow-sm border-2 border-[#A6C8E0]/20 mb-6 relative overflow-hidden">
              <Star className="absolute -right-6 -bottom-6 w-32 h-32 text-[#A6C8E0]/5 pointer-events-none" />
              <div className="flex justify-between items-start relative z-10 flex-wrap gap-2">
                <h2 className="text-2xl font-bold text-[#6D5E58] flex items-center">
                  <Star className="text-[#FDE093] fill-[#FDE093] mr-2 w-6 h-6 drop-shadow-sm" />
                  {currentActiveBillObj.Bill_Name}
                  {(currentActiveBillRole === 'Admin' || currentActiveBillRole === 'Full Editor') && (
                    <button 
                      onClick={() => triggerOpenBillModal(currentActiveBillObj.Bill_ID)}
                      className="ml-2 text-sm text-[#A6C8E0] hover:text-[#8FB4CE] transition-colors"
                    >
                      <Edit3 className="w-4 h-4" />
                    </button>
                  )}
                </h2>
                <span className={`px-3 py-1 rounded-full text-[11px] font-bold border ${
                  currentActiveBillObj.Status === 'เคลียร์แล้ว' || currentActiveBillObj.Status === 'สำเร็จแล้ว'
                    ? 'bg-green-100 text-green-600 border-green-200'
                    : 'bg-rose-100 text-rose-500 border-rose-200'
                }`}>
                  {currentActiveBillObj.Status || 'เปิดอยู่'}
                </span>
              </div>

              <div className="relative z-10 mt-3 space-y-2">
                <p className="text-sm text-[#A89F9A] font-medium bg-[#A6C8E0]/5 inline-flex items-center px-2 py-1 rounded-lg">
                  <Calendar className="text-[#A6C8E0] mr-1 w-4 h-4" /> 
                  {currentActiveBillObj.End_Date ? `${currentActiveBillObj.Start_Date} ถึง ${currentActiveBillObj.End_Date}` : currentActiveBillObj.Start_Date}
                </p>
                <p className="text-sm font-medium text-[#6D5E58] bg-[#F6B896]/10 inline-flex items-center px-2 py-1 rounded-lg ml-2">
                  <Users className="text-[#F6B896] mr-1 w-4 h-4" /> {currentActiveBillObj.Members}
                </p>
              </div>

              {/* Admin configuration actions for current bill */}
              {currentUser?.isAdmin && (
                <div className="mt-5 pt-5 border-t-2 border-dashed border-[#A6C8E0]/20 flex gap-2 relative z-10 flex-wrap">
                  <button 
                    onClick={handleGenerateShareLink} 
                    className="flex-1 bg-[#A6C8E0]/10 text-[#A6C8E0] hover:bg-[#A6C8E0]/20 py-2.5 rounded-xl text-sm font-bold transition-colors flex items-center justify-center"
                  >
                    <Copy className="w-4 h-4 mr-1.5" /> แชร์ลิงก์ภายนอก
                  </button>
                  <button 
                    onClick={triggerOpenPermissionModal} 
                    className="flex-1 bg-[#F6B896]/10 text-[#F6B896] hover:bg-[#F6B896]/20 py-2.5 rounded-xl text-sm font-bold transition-colors flex items-center justify-center"
                  >
                    <Shield className="w-4 h-4 mr-1.5" /> จัดการสิทธิ์ทริป
                  </button>
                  <button 
                    onClick={handleDeleteCurrentBill} 
                    className="bg-rose-50 text-rose-500 hover:bg-rose-100 py-2.5 px-4 rounded-xl text-sm font-bold transition-colors"
                  >
                    <Trash2 className="w-4 h-4" />
                  </button>
                </div>
              )}

              {/* Share link box */}
              {currentActiveBillObj.Share_Key && (
                <div className="mt-4 p-3 bg-[#A6C8E0]/5 rounded-xl border-2 border-[#A6C8E0]/20 flex items-center justify-between hidden md:flex relative z-10">
                  <div className="truncate mr-3">
                    <p className="text-[10px] font-bold text-[#A6C8E0] mb-0.5 uppercase tracking-wider">ลิงก์แชร์ของทริปนี้</p>
                    <p className="text-xs text-[#A89F9A] font-medium truncate">
                      {`${window.location.origin}${window.location.pathname}?billId=${currentActiveBillObj.Bill_ID}&key=${currentActiveBillObj.Share_Key}`}
                    </p>
                  </div>
                  <button 
                    onClick={() => handleCopyShareLink(`${window.location.origin}${window.location.pathname}?billId=${currentActiveBillObj.Bill_ID}&key=${currentActiveBillObj.Share_Key}`)} 
                    className="shrink-0 text-white bg-[#A6C8E0] hover:bg-[#8FB4CE] px-4 py-2 rounded-lg text-xs font-bold transition-all shadow-sm"
                  >
                    คัดลอกลิงก์
                  </button>
                </div>
              )}
            </div>

            {/* View Switching Tab */}
            <div className="flex space-x-3 mb-5 p-1 bg-white/50 rounded-2xl backdrop-blur-sm border-2 border-white shadow-sm">
              <button 
                onClick={() => setBillTab('tx')} 
                className={`flex-1 py-2.5 rounded-xl font-bold transition-all text-sm ${
                  billTab === 'tx' 
                    ? 'bg-gradient-to-r from-[#F6B896] to-[#A6C8E0] text-white shadow-sm' 
                    : 'bg-transparent text-[#A89F9A] hover:text-[#6D5E58]'
                }`}
              >
                รายการจ่าย
              </button>
              <button 
                onClick={() => setBillTab('summary')} 
                className={`flex-1 py-2.5 rounded-xl font-bold transition-all text-sm ${
                  billTab === 'summary' 
                    ? 'bg-gradient-to-r from-[#F6B896] to-[#A6C8E0] text-white shadow-sm' 
                    : 'bg-transparent text-[#A89F9A] hover:text-[#6D5E58]'
                }`}
              >
                ใครจ่ายใคร?
              </button>
            </div>

            {/* TAB 1: Transactions list view */}
            {billTab === 'tx' && (
              <div className="space-y-4">
                {activeBillTransactions.map(tx => {
                  let canEdit = false;
                  if (currentActiveBillRole === 'Admin' || currentActiveBillRole === 'Full Editor') canEdit = true;
                  else if (currentActiveBillRole === 'Self Editor' && currentUser && tx.Paid_By === currentUser.displayName) canEdit = true;

                  const spentCurrency = tx.Spent_Currency || 'THB';

                  return (
                    <div key={tx.Transaction_ID} className="bg-white p-5 rounded-[24px] border-2 border-white shadow-sm hover:shadow-md transition-all flex flex-col relative overflow-hidden group">
                      <div className="flex justify-between items-start flex-wrap gap-2">
                        <div>
                          <h4 className="font-bold text-[#6D5E58] text-base">{tx.Description}</h4>
                          <div className="space-y-1.5 mt-2">
                            <p className="text-sm font-bold text-[#6D5E58] bg-[#F6B896]/10 inline-flex px-3 py-1 rounded-md">
                              <Wallet className="text-[#F6B896] w-3.5 h-3.5 mr-1.5" /> จ่ายโดย: <b>{tx.Paid_By}</b>
                            </p>
                            <br />
                            <p className="text-xs font-bold text-[#6D5E58] bg-gray-100 inline-flex px-3 py-1 rounded-md">
                              <PieChart className="text-gray-400 w-3.5 h-3.5 mr-1.5" /> หารแบบ: <span className="text-[#A6C8E0] ml-1">{tx.Split_Type}</span> ({tx.Split_Detail})
                            </p>
                          </div>
                        </div>

                        <div className="text-right shrink-0">
                          <p className="font-bold text-xl text-[#A6C8E0] drop-shadow-sm">฿{parseFloat(tx.Total_Amount).toLocaleString(undefined, { minimumFractionDigits: 2 })}</p>
                          {spentCurrency !== 'THB' && tx.Foreign_Amount && (
                            <span className="text-xs text-[#A89F9A] font-medium block mt-0.5">
                              {spentCurrency} {parseFloat(tx.Foreign_Amount).toLocaleString(undefined, { minimumFractionDigits: 2 })} (เรท {tx.Exchange_Rate})
                            </span>
                          )}
                          <p className="text-[10px] text-[#A89F9A] font-medium mt-1">{tx.Transaction_Date || ''}</p>
                        </div>
                      </div>

                      <div className="flex justify-between items-center mt-4 pt-3 border-t border-dashed border-gray-100">
                        {tx.Image_URL ? (
                          <a 
                            href={tx.Image_URL} 
                            target="_blank" 
                            rel="noopener noreferrer"
                            className="text-[11px] font-bold bg-[#A6C8E0]/10 text-[#A6C8E0] hover:bg-[#A6C8E0]/20 px-3 py-1.5 rounded-lg transition-colors flex items-center"
                          >
                            <ImageIcon className="w-3.5 h-3.5 mr-1" /> ดูรูปสลิป
                          </a>
                        ) : (
                          <div />
                        )}

                        {canEdit && (
                          <div className="flex gap-1">
                            <button 
                              onClick={() => triggerOpenTxModal(tx.Transaction_ID)} 
                              className="text-[#A6C8E0] hover:text-white hover:bg-[#A6C8E0] bg-[#A6C8E0]/10 p-2 rounded-lg transition-colors"
                            >
                              <Edit3 className="w-4 h-4" />
                            </button>
                            <button 
                              onClick={() => handleDeleteTransaction(tx.Transaction_ID, tx.File_ID)} 
                              className="text-rose-400 hover:text-white hover:bg-rose-500 bg-rose-50 p-2 rounded-lg transition-colors"
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>
                          </div>
                        )}
                      </div>
                    </div>
                  );
                })}

                {activeBillTransactions.length === 0 && (
                  <div className="text-center py-12 text-[#A89F9A] text-sm bg-white/50 rounded-3xl border-2 border-dashed border-white">
                    <Coins className="w-10 h-10 text-[#A6C8E0]/50 mx-auto mb-2" />
                    ยังไม่มีรายการใช้จ่าย กดปุ่ม + เพื่อเพิ่มเลย!
                  </div>
                )}
              </div>
            )}

            {/* TAB 2: Debt calculations summaries */}
            {billTab === 'summary' && (
              <div className="space-y-4">
                <h3 className="text-sm font-bold text-[#6D5E58] mb-2 ml-1">
                  <Star className="text-[#A6C8E0] inline w-4 h-4 mr-1" /> ยอดรวมทริปนี้
                </h3>
                <div className="bg-gradient-to-r from-[#F6B896] to-[#A6C8E0] text-white p-5 rounded-[24px] flex justify-between items-center mb-6 shadow-sm relative overflow-hidden">
                  <Coins className="absolute -left-4 -bottom-4 w-24 h-24 text-white/15" />
                  <div className="relative z-10">
                    <p className="text-3xl font-bold tracking-wide drop-shadow-md">
                      ฿{debtSettlementData.totalTrip.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </p>
                    <p className="text-xs font-medium opacity-90 mt-1">
                      เฉลี่ยคนละ ฿{debtSettlementData.avgPerPerson.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                    </p>
                  </div>
                </div>

                <h3 className="text-sm font-bold text-[#6D5E58] mb-2 ml-1">
                  <Users className="text-[#A6C8E0] inline w-4 h-4 mr-1" /> สรุปบัญชีรายคน
                </h3>
                <div className="bg-white border-2 border-white rounded-[24px] shadow-sm mb-6 p-2">
                  {debtSettlementData.memberStats.map(stat => {
                    const friendObj = cacheUsers.find(u => u.Display_Name === stat.name);
                    const friendAvatar = friendObj?.Avatar || 'F1.png';
                    
                    let netCol = 'text-[#A89F9A]';
                    let netBg = 'bg-gray-50';
                    if (stat.net > 0.05) {
                      netCol = 'text-green-600';
                      netBg = 'bg-green-50';
                    } else if (stat.net < -0.05) {
                      netCol = 'text-rose-500';
                      netBg = 'bg-rose-50';
                    }

                    return (
                      <div key={stat.name} className="flex flex-col p-3 border-b border-gray-100 last:border-0">
                        <div className="flex justify-between items-center mb-1">
                          <div className="flex items-center space-x-3">
                            <img 
                              src={friendAvatar} 
                              alt={stat.name} 
                              className="w-10 h-10 rounded-full object-contain border border-gray-100 bg-white p-1"
                              onError={(e) => { e.target.src = 'https://placehold.co/150/F2F7F9/9BBFD4?text='; }}
                            />
                            <span className="font-bold text-sm text-[#6D5E58]">{stat.name}</span>
                          </div>
                          <span className={`text-xs font-bold px-2 py-1 rounded-lg ${netBg} ${netCol}`}>
                            สุทธิ: {stat.net > 0.05 ? '+' : ''}{stat.net.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                          </span>
                        </div>
                        <div className="flex justify-between text-[11px] text-[#A89F9A] font-medium pl-14">
                          <span>จ่ายไปก่อน: ฿{stat.paid.toLocaleString(undefined, { minimumFractionDigits: 2 })}</span>
                          <span>ต้องหารจริง: ฿{stat.share.toLocaleString(undefined, { minimumFractionDigits: 2 })}</span>
                        </div>
                      </div>
                    );
                  })}
                </div>

                <h3 className="text-sm font-bold text-[#6D5E58] mb-2 ml-1">
                  <Activity className="text-[#A6C8E0] inline w-4 h-4 mr-1" /> สรุปการโอนเงิน
                </h3>

                {debtSettlementData.settlements.length === 0 ? (
                  <div className="text-center text-green-500 font-bold bg-green-50 p-6 rounded-[24px] border-2 border-green-200">
                    <div className="text-4xl mb-2">🎉</div>
                    เคลียร์ครบจบทุกบิล!<br />
                    <span className="text-sm font-medium text-green-600/70">ยอดพอดีเป๊ะ ไม่มีใครติดหนี้ใครแล้วจ้า</span>
                  </div>
                ) : (
                  debtSettlementData.settlements.map((s, index) => {
                    const isMeFrom = currentUser && s.from === currentUser.displayName;
                    const isMeTo = currentUser && s.to === currentUser.displayName;
                    const boxClass = (isMeFrom || isMeTo) ? 'bg-white border-[#A6C8E0] shadow-md' : 'bg-white/60 border-white shadow-sm';
                    const fromColor = isMeFrom ? 'text-rose-500 bg-rose-50' : 'text-[#6D5E58] bg-gray-50';
                    const toColor = isMeTo ? 'text-green-600 bg-green-50' : 'text-[#6D5E58] bg-gray-50';

                    const fromUser = cacheUsers.find(u => u.Display_Name === s.from);
                    const toUser = cacheUsers.find(u => u.Display_Name === s.to);
                    const fromAvatar = fromUser?.Avatar || 'F1.png';
                    const toAvatar = toUser?.Avatar || 'F1.png';

                    return (
                      <div key={index} className={`flex items-center justify-between p-4 rounded-[20px] border-2 ${boxClass} transition-all mb-3`}>
                        <div className="flex items-center gap-2">
                          <div className={`text-center px-2 py-1.5 rounded-xl ${fromColor} min-w-[100px] flex flex-col items-center`}>
                            <img src={fromAvatar} alt="From avatar" className="w-14 h-14 rounded-full object-contain mb-1 bg-white border-2 border-gray-100 p-1" />
                            <p className="font-bold text-xs truncate max-w-[90px]">{s.from}</p>
                            <p className="text-[8px] uppercase tracking-wider font-bold opacity-70">จ่ายให้</p>
                          </div>
                          
                          <div className="text-[#A6C8E0]/40 animate-pulse text-lg">➡️</div>
                          
                          <div className={`text-center px-2 py-1.5 rounded-xl ${toColor} min-w-[100px] flex flex-col items-center`}>
                            <img src={toAvatar} alt="To avatar" className="w-14 h-14 rounded-full object-contain mb-1 bg-white border-2 border-gray-100 p-1" />
                            <p className="font-bold text-xs truncate max-w-[90px]">{s.to}</p>
                            <p className="text-[8px] uppercase tracking-wider font-bold opacity-70">รับเงิน</p>
                          </div>
                        </div>

                        <div className="text-right pl-2">
                          <span className={`font-bold text-lg ${isMeFrom ? 'text-rose-500' : (isMeTo ? 'text-green-500' : 'text-[#6D5E58]')}`}>
                            ฿{s.amount.toLocaleString(undefined, { minimumFractionDigits: 2 })}
                          </span>
                        </div>
                      </div>
                    );
                  })
                )}
              </div>
            )}

            {/* FAB Add Transaction */}
            {currentActiveBillRole !== 'Viewer' && (
              <button 
                onClick={() => triggerOpenTxModal()} 
                className="fixed bottom-6 right-6 w-16 h-16 bg-[#F6B896] text-white rounded-full shadow-[0_8px_20px_rgba(248,179,155,0.5)] flex items-center justify-center text-2xl hover:scale-105 active:scale-95 transition-transform z-40 border-4 border-white"
              >
                <Plus className="w-8 h-8" />
              </button>
            )}
          </div>
        )}

        {/* MEMBER MANAGEMENT SCREEN (ADMINS ONLY) */}
        {currentScreen === 'members' && currentUser?.isAdmin && (
          <div className="animate-fade-in">
            <button 
              onClick={() => setCurrentScreen('dashboard')}
              className="mb-4 text-[#A6C8E0] font-bold hover:text-[#8FB4CE] transition-colors flex items-center bg-white/50 px-3 py-1.5 rounded-full backdrop-blur-sm shadow-sm"
            >
              <ArrowLeft className="w-4 h-4 mr-2" /> กลับหน้าหลัก
            </button>

            <div className="flex justify-between items-end mb-6 bg-white/70 p-5 rounded-3xl border-2 border-white backdrop-blur-sm shadow-sm">
              <h2 className="text-xl font-bold text-[#6D5E58] flex items-center">
                <Users className="text-[#A6C8E0] mr-2 w-5 h-5" /> จัดการสมาชิก
              </h2>
              <button 
                onClick={() => triggerOpenMemberModal()} 
                className="bg-[#A6C8E0] text-white px-4 py-2 rounded-full text-sm font-bold shadow-sm hover:bg-[#8FB4CE] hover:scale-105 transition-transform"
              >
                <Plus className="inline w-4 h-4 mr-1" /> เพิ่มคน
              </button>
            </div>

            <div className="relative mb-4 bg-white/50 p-3 rounded-2xl border-2 border-white backdrop-blur-sm shadow-sm">
              <Search className="absolute left-6 top-6 text-[#A89F9A] w-4 h-4" />
              <input 
                type="text" 
                value={searchMembersQuery}
                onChange={(e) => setSearchMembersQuery(e.target.value)}
                className="w-full pl-10 pr-4 py-2 border-2 border-gray-100 rounded-xl outline-none text-sm font-medium focus:border-[#A6C8E0] bg-white transition-colors" 
                placeholder="ค้นหาสมาชิก..."
              />
            </div>

            <div className="space-y-3">
              {filteredMembersList.map(u => {
                const canLogin = u.Allow_Login === 'Yes';
                const avatarImg = u.Avatar || 'F1.png';
                const isSelfAdmin = (u.Display_Name === 'เม' || u.Username === 'maywuru' || u.Display_Name === currentUser?.displayName);

                return (
                  <div key={u.Display_Name} className="bg-white p-4 rounded-2xl border-2 border-white shadow-sm flex justify-between items-center transition-all hover:shadow-md">
                    <div className="flex items-center space-x-4 truncate">
                      <img 
                        src={avatarImg} 
                        alt="Avatar icon" 
                        className="w-16 h-16 rounded-2xl object-contain border border-gray-100 bg-gray-50/50 p-1"
                        onError={(e) => { e.target.src = 'https://placehold.co/150/F2F7F9/9BBFD4?text='; }}
                      />
                      <div className="truncate">
                        <p className="font-bold text-[#6D5E58] text-base">
                          {u.Display_Name} 
                          <span className={`text-[10px] px-2 py-0.5 rounded-full ml-1.5 font-bold ${canLogin ? 'bg-green-100 text-green-600' : 'bg-gray-100 text-[#A89F9A]'}`}>
                            {canLogin ? 'เข้าแอปได้' : 'จดชื่อเฉยๆ'}
                          </span>
                        </p>
                        {canLogin && (
                          <p className="text-[11px] font-medium text-[#A89F9A] mt-1 bg-gray-50 inline-block px-2 py-0.5 rounded-md">
                            User: {u.Username} | Pass: {u.Password}
                          </p>
                        )}
                      </div>
                    </div>

                    <div className="flex items-center shrink-0">
                      {canLogin && (
                        <button 
                          onClick={() => triggerOpenUserPermissionModal(u.Display_Name)} 
                          className="text-[#F6B896] hover:text-white hover:bg-[#F6B896] bg-[#F6B896]/10 p-2.5 rounded-xl transition-colors mr-1"
                          title="สิทธิ์เข้าถึงรายบุคคล"
                        >
                          <Shield className="w-4 h-4" />
                        </button>
                      )}
                      
                      {u.Status === 'Locked' && (
                        <button 
                          onClick={() => handleUnlockUserAccount(u.Display_Name)} 
                          className="text-green-500 hover:text-white hover:bg-green-500 bg-green-50 p-2.5 rounded-xl transition-colors mr-1 animate-pulse"
                          title="ปลดล็อกบัญชี"
                        >
                          <Unlock className="w-4 h-4" />
                        </button>
                      )}

                      <button 
                        onClick={() => triggerOpenMemberModal(u.Display_Name)} 
                        className="text-[#A6C8E0] hover:text-white hover:bg-[#A6C8E0] bg-[#A6C8E0]/10 p-2.5 rounded-xl transition-colors"
                      >
                        <Edit3 className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </main>

      {/* ==================== Pastels Calculator Popover Panel ==================== */}
      {isCalcOpen && (
        <div className="fixed inset-0 bg-[#6D5E58]/20 z-[130] flex justify-center items-center p-4 backdrop-blur-sm animate-fade-in">
          <div className="bg-white rounded-3xl w-full max-w-xs p-5 shadow-2xl border-4 border-[#A6C8E0]/20">
            <div className="flex justify-between items-center mb-3">
              <span className="text-xs font-bold text-[#A89F9A] flex items-center">
                <Calculator className="text-[#A6C8E0] mr-1.5 w-4 h-4" /> เครื่องคิดเลขพาสเทล
              </span>
              <button onClick={() => setIsCalcOpen(false)} className="text-[#A89F9A] hover:text-[#6D5E58]">
                <X className="w-5 h-5" />
              </button>
            </div>
            
            <div className="bg-gray-50 border border-gray-100 rounded-2xl p-3 mb-4 text-right">
              <div className="text-xs text-[#A89F9A] font-mono min-h-[16px] truncate">{calcExpression}</div>
              <div className="text-2xl font-bold text-[#F6B896] font-mono truncate">{calcCurrentInput}</div>
            </div>

            <div className="grid grid-cols-4 gap-2">
              <button onClick={() => handleCalcInputPress('C')} className="py-3 rounded-xl font-bold bg-rose-50 text-rose-500 hover:bg-rose-100 transition-colors">C</button>
              <button onClick={() => handleCalcInputPress('⌫')} className="py-3 rounded-xl font-bold bg-gray-100 text-[#6D5E58] hover:bg-gray-200 transition-colors">⌫</button>
              <button onClick={() => handleCalcInputPress('/')} className="py-3 rounded-xl font-bold bg-[#A6C8E0]/20 text-[#A6C8E0] hover:bg-[#A6C8E0]/30 transition-colors">/</button>
              <button onClick={() => handleCalcInputPress('*')} className="py-3 rounded-xl font-bold bg-[#A6C8E0]/20 text-[#A6C8E0] hover:bg-[#A6C8E0]/30 transition-colors">*</button>

              <button onClick={() => handleCalcInputPress('7')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">7</button>
              <button onClick={() => handleCalcInputPress('8')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">8</button>
              <button onClick={() => handleCalcInputPress('9')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">9</button>
              <button onClick={() => handleCalcInputPress('-')} className="py-3 rounded-xl font-bold bg-[#A6C8E0]/20 text-[#A6C8E0] hover:bg-[#A6C8E0]/30 transition-colors">-</button>

              <button onClick={() => handleCalcInputPress('4')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">4</button>
              <button onClick={() => handleCalcInputPress('5')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">5</button>
              <button onClick={() => handleCalcInputPress('6')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">6</button>
              <button onClick={() => handleCalcInputPress('+')} className="py-3 rounded-xl font-bold bg-[#A6C8E0]/20 text-[#A6C8E0] hover:bg-[#A6C8E0]/30 transition-colors">+</button>

              <button onClick={() => handleCalcInputPress('1')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">1</button>
              <button onClick={() => handleCalcInputPress('2')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">2</button>
              <button onClick={() => handleCalcInputPress('3')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">3</button>
              <button onClick={() => handleCalcInputPress('=')} className="row-span-2 py-8 rounded-xl font-bold bg-gradient-to-b from-[#F6B896] to-[#A6C8E0] text-white hover:opacity-90 flex items-center justify-center">=</button>

              <button onClick={() => handleCalcInputPress('0')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">0</button>
              <button onClick={() => handleCalcInputPress('.')} className="py-3 rounded-xl font-bold bg-gray-50 text-[#6D5E58] hover:bg-gray-100 transition-colors">.</button>
              <button onClick={() => handleCalcInputPress('%')} className="py-3 rounded-xl font-bold bg-[#A6C8E0]/20 text-[#A6C8E0] hover:bg-[#A6C8E0]/30 transition-colors">%</button>
            </div>

            <button 
              onClick={handleApplyCalcResult} 
              className="w-full mt-4 py-3 rounded-xl font-bold bg-gradient-to-r from-[#F6B896] to-[#A6C8E0] text-white shadow-md flex items-center justify-center hover:scale-[1.02] transition-transform text-sm"
            >
              <Check className="w-4 h-4 mr-2" /> นำตัวเลขนี้ไปใช้
            </button>
          </div>
        </div>
      )}

      {/* ==================== MODALS ==================== */}

      {/* 1. BILL MODAL (CREATE / EDIT) */}
      {isBillModalOpen && (
        <div className="fixed inset-0 bg-[#6D5E58]/40 z-50 flex justify-center items-center p-4 backdrop-blur-sm animate-fade-in">
          <div className="bg-white rounded-[30px] w-full max-w-md p-7 border-4 border-[#A6C8E0]/20 shadow-2xl max-h-[90vh] overflow-y-auto">
            <h3 className="text-xl font-bold mb-5 text-[#6D5E58] flex items-center">
              <Sparkles className="text-[#FDE093] mr-2 w-5 h-5" />
              {billForm.id ? 'แก้ไขข้อมูลทริป' : 'สร้างบิลทริปใหม่'}
            </h3>
            <form onSubmit={handleSaveBill} className="space-y-4">
              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-1 block">ชื่อทริป/บิล</label>
                <input 
                  type="text" 
                  required 
                  value={billForm.name}
                  onChange={(e) => setBillForm(prev => ({ ...prev, name: e.target.value }))}
                  className="w-full p-3 border-2 border-[#A6C8E0]/20 rounded-xl focus:border-[#A6C8E0] focus:bg-[#A6C8E0]/5 outline-none font-medium transition-colors text-sm" 
                  placeholder="เช่น ทริปหัวหินแสนชิล..."
                />
              </div>

              {/* Multi-Currency Selection Setup (Up to 3 currencies) */}
              <div className="p-3 bg-blue-50/50 rounded-2xl border border-blue-100 space-y-2.5">
                <span className="text-xs font-bold text-blue-600 flex items-center mb-1">
                  <Globe className="w-4 h-4 mr-1" /> สกุลเงินเปิดใช้งานในทริป (สูงสุด 3 สกุลเงิน)
                </span>

                {/* Currency 1 */}
                <div className="flex gap-2 items-center">
                  <div className="w-1/2">
                    <select 
                      value={billForm.currency1}
                      onChange={(e) => handleCurrencyFieldChange(1, e.target.value)}
                      className="w-full p-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-xs bg-white shadow-sm"
                    >
                      <option value="THB">🇹🇭 THB (บาท)</option>
                      <option value="JPY">🇯🇵 JPY (เยน)</option>
                      <option value="KRW">🇰🇷 KRW (วอน)</option>
                      <option value="TWD">🇹🇼 TWD (ดอลลาร์ไต้หวัน)</option>
                      <option value="CNY">🇨🇳 CNY (หยวน)</option>
                      <option value="HKD">🇭🇰 HKD (ดอลลาร์ฮ่องกง)</option>
                      <option value="SGD">🇸🇬 SGD (ดอลลาร์สิงคโปร์)</option>
                      <option value="USD">🇺🇸 USD (ดอลลาร์สหรัฐ)</option>
                      <option value="EUR">🇪🇺 EUR (ยูโร)</option>
                      <option value="GBP">🇬🇧 GBP (ปอนด์)</option>
                    </select>
                  </div>
                  <div className="w-1/2 relative">
                    <input 
                      type="number" 
                      step="0.00001"
                      value={billForm.exchangeRate1}
                      onChange={(e) => setBillForm(prev => ({ ...prev, exchangeRate1: e.target.value }))}
                      readOnly={billForm.currency1 === 'THB'}
                      className="w-full pl-2 pr-7 py-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-xs bg-white shadow-sm" 
                      placeholder="เรทเทียบ THB"
                    />
                    {billForm.currency1 !== 'THB' && (
                      <button 
                        type="button" 
                        onClick={() => fetchRateForBillForm(1, billForm.currency1)} 
                        className="absolute right-2 top-2.5 text-[#A6C8E0] hover:text-[#8FB4CE]"
                      >
                        ⚡
                      </button>
                    )}
                  </div>
                </div>

                {/* Currency 2 */}
                <div className="flex gap-2 items-center">
                  <div className="w-1/2">
                    <select 
                      value={billForm.currency2}
                      onChange={(e) => handleCurrencyFieldChange(2, e.target.value)}
                      className="w-full p-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-xs bg-white shadow-sm"
                    >
                      <option value="NONE">❌ ปิดใช้งาน (ไม่มี)</option>
                      <option value="THB">🇹🇭 THB (บาท)</option>
                      <option value="JPY">🇯🇵 JPY (เยน)</option>
                      <option value="KRW">🇰🇷 KRW (วอน)</option>
                      <option value="TWD">🇹🇼 TWD (ดอลลาร์ไต้หวัน)</option>
                      <option value="CNY">🇨🇳 CNY (หยวน)</option>
                      <option value="HKD">🇭🇰 HKD (ดอลลาร์ฮ่องกง)</option>
                      <option value="SGD">🇸🇬 SGD (ดอลลาร์สิงคโปร์)</option>
                      <option value="USD">🇺🇸 USD (ดอลลาร์สหรัฐ)</option>
                      <option value="EUR">🇪🇺 EUR (ยูโร)</option>
                      <option value="GBP">🇬🇧 GBP (ปอนด์)</option>
                    </select>
                  </div>
                  <div className="w-1/2 relative">
                    <input 
                      type="number" 
                      step="0.00001"
                      value={billForm.exchangeRate2}
                      onChange={(e) => setBillForm(prev => ({ ...prev, exchangeRate2: e.target.value }))}
                      readOnly={billForm.currency2 === 'NONE' || billForm.currency2 === 'THB'}
                      className="w-full pl-2 pr-7 py-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-xs bg-white shadow-sm" 
                      placeholder="เรทเทียบ THB"
                    />
                    {billForm.currency2 !== 'NONE' && billForm.currency2 !== 'THB' && (
                      <button 
                        type="button" 
                        onClick={() => fetchRateForBillForm(2, billForm.currency2)} 
                        className="absolute right-2 top-2.5 text-[#A6C8E0] hover:text-[#8FB4CE]"
                      >
                        ⚡
                      </button>
                    )}
                  </div>
                </div>

                {/* Currency 3 */}
                <div className="flex gap-2 items-center">
                  <div className="w-1/2">
                    <select 
                      value={billForm.currency3}
                      onChange={(e) => handleCurrencyFieldChange(3, e.target.value)}
                      className="w-full p-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-xs bg-white shadow-sm"
                    >
                      <option value="NONE">❌ ปิดใช้งาน (ไม่มี)</option>
                      <option value="THB">🇹🇭 THB (บาท)</option>
                      <option value="JPY">🇯🇵 JPY (เยน)</option>
                      <option value="KRW">🇰🇷 KRW (วอน)</option>
                      <option value="TWD">🇹🇼 TWD (ดอลลาร์ไต้หวัน)</option>
                      <option value="CNY">🇨🇳 CNY (หยวน)</option>
                      <option value="HKD">🇭🇰 HKD (ดอลลาร์ฮ่องกง)</option>
                      <option value="SGD">🇸🇬 SGD (ดอลลาร์สิงคโปร์)</option>
                      <option value="USD">🇺🇸 USD (ดอลลาร์สหรัฐ)</option>
                      <option value="EUR">🇪🇺 EUR (ยูโร)</option>
                      <option value="GBP">🇬🇧 GBP (ปอนด์)</option>
                    </select>
                  </div>
                  <div className="w-1/2 relative">
                    <input 
                      type="number" 
                      step="0.00001"
                      value={billForm.exchangeRate3}
                      onChange={(e) => setBillForm(prev => ({ ...prev, exchangeRate3: e.target.value }))}
                      readOnly={billForm.currency3 === 'NONE' || billForm.currency3 === 'THB'}
                      className="w-full pl-2 pr-7 py-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-xs bg-white shadow-sm" 
                      placeholder="เรทเทียบ THB"
                    />
                    {billForm.currency3 !== 'NONE' && billForm.currency3 !== 'THB' && (
                      <button 
                        type="button" 
                        onClick={() => fetchRateForBillForm(3, billForm.currency3)} 
                        className="absolute right-2 top-2.5 text-[#A6C8E0] hover:text-[#8FB4CE]"
                      >
                        ⚡
                      </button>
                    )}
                  </div>
                </div>
              </div>

              <div className="flex gap-3">
                <div className="flex-1">
                  <label className="text-sm font-bold text-[#6D5E58] mb-1 block">วันเริ่มทริป</label>
                  <input 
                    type="date" 
                    required 
                    value={billForm.start}
                    onChange={(e) => setBillForm(prev => ({ ...prev, start: e.target.value }))}
                    className="w-full p-3 border-2 border-[#A6C8E0]/20 rounded-xl focus:border-[#A6C8E0] outline-none font-medium transition-colors text-xs" 
                  />
                </div>
                <div className="flex-1">
                  <label className="text-sm font-bold text-[#6D5E58] mb-1 block">สิ้นสุด (ทางเลือก)</label>
                  <input 
                    type="date" 
                    value={billForm.end}
                    onChange={(e) => setBillForm(prev => ({ ...prev, end: e.target.value }))}
                    className="w-full p-3 border-2 border-[#A6C8E0]/20 rounded-xl focus:border-[#A6C8E0] outline-none font-medium transition-colors text-xs" 
                  />
                </div>
              </div>

              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-1 block">แก๊งเพื่อนที่มีส่วนร่วม (ติ๊กเลือก)</label>
                <div className="relative mb-2">
                  <Search className="absolute left-3 top-2.5 text-[#A89F9A] w-3.5 h-3.5" />
                  <input 
                    type="text" 
                    value={billForm.searchQuery}
                    onChange={(e) => setBillForm(prev => ({ ...prev, searchQuery: e.target.value }))}
                    className="w-full pl-8 pr-3 py-1.5 border border-gray-200 rounded-xl outline-none text-xs font-medium focus:border-[#A6C8E0]"
                    placeholder="ค้นหาชื่อเพื่อน..."
                  />
                </div>
                <div className="grid grid-cols-2 gap-2 mt-1 bg-[#A6C8E0]/5 border border-[#A6C8E0]/10 p-4 rounded-2xl max-h-40 overflow-y-auto">
                  {cacheUsers.filter(u => {
                    if (!u.Display_Name) return false;
                    if (billForm.searchQuery) return u.Display_Name.toLowerCase().includes(billForm.searchQuery.toLowerCase());
                    return true;
                  }).map(u => {
                    const isChecked = billForm.selectedMembers.includes(u.Display_Name);
                    return (
                      <label key={u.Display_Name} className="flex items-center gap-2 text-sm font-bold text-[#6D5E58] cursor-pointer hover:bg-white p-2 rounded-lg transition-colors">
                        <input 
                          type="checkbox" 
                          value={u.Display_Name}
                          checked={isChecked}
                          onChange={(e) => {
                            const val = e.target.value;
                            setBillForm(prev => {
                              const list = prev.selectedMembers.includes(val) 
                                ? prev.selectedMembers.filter(m => m !== val) 
                                : [...prev.selectedMembers, val];
                              return { ...prev, selectedMembers: list };
                            });
                          }}
                          className="accent-[#A6C8E0] w-4 h-4 cursor-pointer" 
                        />
                        {u.Display_Name}
                      </label>
                    );
                  })}
                </div>
              </div>

              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-1 block">สถานะบิล</label>
                <select 
                  value={billForm.status}
                  onChange={(e) => setBillForm(prev => ({ ...prev, status: e.target.value }))}
                  className="w-full p-3 border-2 border-[#A6C8E0]/20 rounded-xl focus:border-[#A6C8E0] outline-none font-medium text-sm bg-white"
                >
                  <option value="เปิดอยู่">🔴 เปิดอยู่ (ยังไม่เคลียร์)</option>
                  <option value="เคลียร์แล้ว">🟢 เคลียร์แล้วจ้า</option>
                </select>
              </div>

              <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
                <button 
                  type="button" 
                  onClick={() => setIsBillModalOpen(false)} 
                  className="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-xl font-bold text-[#A89F9A] transition-colors text-xs"
                >
                  ยกเลิก
                </button>
                <button 
                  type="submit" 
                  className="px-5 py-2.5 bg-[#A6C8E0] hover:bg-[#8FB4CE] text-white rounded-xl font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all text-xs"
                >
                  บันทึกทริป
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* 2. TRANSACTION MODAL (ADD / EDIT) */}
      {isTxModalOpen && currentActiveBillObj && (
        <div className="fixed inset-0 bg-[#6D5E58]/40 z-50 flex justify-center items-center p-4 backdrop-blur-sm animate-fade-in">
          <div className="bg-white rounded-[30px] w-full max-w-md p-7 border-4 border-[#F6B896]/30 shadow-2xl max-h-[90vh] overflow-y-auto">
            <h3 className="text-xl font-bold mb-5 text-[#6D5E58] flex items-center">
              <Coins className="text-[#FDE093] mr-2 w-5 h-5" />
              {txForm.id ? 'แก้ไขรายการจ่าย' : 'เพิ่มรายการจ่าย'}
            </h3>
            <form onSubmit={handleSaveTransaction} className="space-y-4">
              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-1 block">จ่ายค่าอะไรเอ่ย?</label>
                <input 
                  type="text" 
                  required 
                  value={txForm.description}
                  onChange={(e) => setTxForm(prev => ({ ...prev, description: e.target.value }))}
                  className="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-[#F6B896] focus:bg-[#F6B896]/5 outline-none font-medium transition-colors text-sm" 
                  placeholder="เช่น ค่าข้าวหมูแดงแสนอร่อย..."
                />
              </div>

              {/* Dynamic Currency selection block based on Bill currencies list */}
              <div className="p-3 bg-blue-50/50 rounded-2xl border border-blue-100 mb-2">
                <div className="mb-2">
                  <label className="text-xs font-bold text-blue-600 flex items-center mb-1">
                    <Coins className="w-3.5 h-3.5 mr-1" /> สกุลเงินที่ใช้จ่ายในบิลนี้
                  </label>
                  <select 
                    value={txForm.spentCurrency}
                    onChange={(e) => handleTxCurrencyChange(e.target.value)}
                    className="w-full p-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-xs bg-white shadow-sm cursor-pointer"
                  >
                    <option value="THB">🇹🇭 THB (บาทไทย)</option>
                    {currentActiveBillObj.Currency_1 && currentActiveBillObj.Currency_1 !== 'THB' && (
                      <option value={currentActiveBillObj.Currency_1}>{currentActiveBillObj.Currency_1}</option>
                    )}
                    {currentActiveBillObj.Currency_2 && currentActiveBillObj.Currency_2 !== 'NONE' && currentActiveBillObj.Currency_2 !== 'THB' && (
                      <option value={currentActiveBillObj.Currency_2}>{currentActiveBillObj.Currency_2}</option>
                    )}
                    {currentActiveBillObj.Currency_3 && currentActiveBillObj.Currency_3 !== 'NONE' && currentActiveBillObj.Currency_3 !== 'THB' && (
                      <option value={currentActiveBillObj.Currency_3}>{currentActiveBillObj.Currency_3}</option>
                    )}
                  </select>
                </div>

                {txForm.spentCurrency !== 'THB' && (
                  <div className="mt-2 animate-fade-in">
                    <label className="text-[10px] font-bold text-[#A89F9A] mb-1 block">ยอดเงินต่างประเทศและอัตราแลกเปลี่ยน</label>
                    <div className="flex gap-2">
                      <div className="flex-[3] relative">
                        <span className="absolute left-3 top-2.5 font-bold text-[#A89F9A] text-xs">{txForm.spentCurrency}</span>
                        <input 
                          type="number" 
                          step="0.01"
                          required
                          value={txForm.foreignAmount}
                          onChange={(e) => handleTxForeignAmountChange(e.target.value)}
                          className="w-full pl-12 pr-2 py-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-[#6D5E58] text-xs bg-white" 
                          placeholder="0.00"
                        />
                      </div>
                      <div className="flex-[2] relative">
                        <span className="absolute left-2 top-2.5 text-[9px] font-bold text-[#A89F9A]">เรท</span>
                        <input 
                          type="number" 
                          step="0.00001"
                          required
                          value={txForm.exchangeRate}
                          onChange={(e) => handleTxExchangeRateChange(e.target.value)}
                          className="w-full pl-8 pr-2 py-2 border border-blue-200 rounded-xl focus:border-[#A6C8E0] outline-none font-bold text-[#6D5E58] text-xs bg-white" 
                        />
                      </div>
                    </div>
                  </div>
                )}
              </div>

              <div className="flex gap-3">
                <div className="flex-[3]">
                  <label className="text-sm font-bold text-[#6D5E58] mb-1 block">ยอดเงินรวม (THB)</label>
                  <div className="relative">
                    <span className="absolute left-4 top-3 font-bold text-[#A89F9A]">฿</span>
                    <input 
                      type="number" 
                      required 
                      step="0.01"
                      value={txForm.totalAmount}
                      onChange={(e) => setTxForm(prev => ({ ...prev, totalAmount: e.target.value }))}
                      className="w-full pl-9 pr-12 py-3 border-2 border-gray-200 rounded-xl focus:border-[#F6B896] focus:bg-[#F6B896]/5 outline-none text-lg font-bold text-[#F6B896] transition-colors" 
                      placeholder="0.00"
                    />
                    <button 
                      type="button" 
                      onClick={() => setIsCalcOpen(true)} 
                      className="absolute right-3 top-2.5 w-8 h-8 text-[#A6C8E0] hover:text-[#8FB4CE] bg-[#A6C8E0]/10 rounded-lg flex items-center justify-center hover:scale-105 active:scale-95 transition-transform"
                    >
                      <Calculator className="w-4 h-4" />
                    </button>
                  </div>
                </div>
                <div className="flex-[2]">
                  <label className="text-sm font-bold text-[#6D5E58] mb-1 block">วันที่</label>
                  <input 
                    type="date" 
                    value={txForm.date}
                    onChange={(e) => setTxForm(prev => ({ ...prev, date: e.target.value }))}
                    className="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-[#F6B896] outline-none text-xs font-medium text-[#A89F9A] bg-white" 
                  />
                </div>
              </div>

              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-1 block">ใครเป็นเจ้ามือ (จ่ายไปก่อน)?</label>
                <select 
                  value={txForm.paidBy}
                  onChange={(e) => setTxForm(prev => ({ ...prev, paidBy: e.target.value }))}
                  disabled={currentActiveBillRole === 'Self Editor'}
                  className="w-full p-3 border-2 border-[#F6B896]/30 rounded-xl focus:border-[#F6B896] outline-none bg-[#F6B896]/5 font-bold text-[#6D5E58] disabled:opacity-75 disabled:cursor-not-allowed"
                >
                  {activeBillMembersList.map(m => (
                    <option key={m} value={m}>{m}</option>
                  ))}
                </select>
              </div>

              <div className="p-4 bg-[#A6C8E0]/5 rounded-2xl border border-[#A6C8E0]/20">
                <label className="text-sm font-bold text-[#6D5E58] mb-2 block text-[#A6C8E0] flex items-center">
                  <PieChart className="w-4 h-4 mr-1.5" /> รูปแบบการหาร
                </label>
                <select 
                  value={txForm.splitType}
                  onChange={(e) => {
                    const type = e.target.value;
                    setTxForm(prev => ({ ...prev, splitType: type }));
                  }}
                  className="w-full p-3 border-2 border-white rounded-xl focus:border-[#A6C8E0] outline-none bg-white font-medium shadow-sm"
                >
                  <option value="หารเท่า">🤝 หารเท่ากันทุกคนชิลๆ</option>
                  <option value="จ่ายเต็มจำนวน">🎯 ฝากซื้อ/จ่ายให้คนเดียว</option>
                  <option value="กำหนดสัดส่วน">⚖️ กำหนดสัดส่วนเองแบบเป๊ะๆ</option>
                </select>

                {/* Sub split view detail */}
                {txForm.splitType === 'จ่ายเต็มจำนวน' && (
                  <div className="mt-3 pt-3 border-t border-[#A6C8E0]/10 animate-fade-in">
                    <label className="block mb-1 text-xs font-bold text-[#A6C8E0]">จ่ายให้ใคร (คนเดียว):</label>
                    <select 
                      value={txForm.splitTarget}
                      onChange={(e) => setTxForm(prev => ({ ...prev, splitTarget: e.target.value }))}
                      className="w-full p-2 border-2 border-white rounded-xl bg-white font-bold outline-none"
                    >
                      {activeBillMembersList.map(m => (
                        <option key={m} value={m}>{m}</option>
                      ))}
                    </select>
                  </div>
                )}

                {txForm.splitType === 'กำหนดสัดส่วน' && (
                  <div className="mt-3 pt-3 border-t border-[#A6C8E0]/10 space-y-2 animate-fade-in max-h-40 overflow-y-auto">
                    <label className="block text-xs font-bold text-[#A6C8E0]">ระบุสัดส่วนของแต่ละคน (หากไม่ต้องการหารให้ใส่ 0):</label>
                    {activeBillMembersList.map(m => (
                      <div key={m} className="flex justify-between items-center bg-white p-2 rounded-xl border border-gray-100">
                        <span className="font-bold pl-2 text-xs">{m}</span>
                        <input 
                          type="number" 
                          min="0"
                          value={txForm.splitRatios[m] || '0'}
                          onChange={(e) => {
                            const val = e.target.value;
                            setTxForm(prev => ({
                              ...prev,
                              splitRatios: { ...prev.splitRatios, [m]: val }
                            }));
                          }}
                          className="w-20 p-1 border-2 border-gray-200 rounded-lg text-center font-bold text-[#F6B896] outline-none focus:border-[#F6B896]"
                        />
                      </div>
                    ))}
                  </div>
                )}
              </div>

              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-2 block">
                  <Camera className="inline w-4 h-4 text-[#A89F9A] mr-1" /> แนบรูปสลิป/บิล (ตัวเลือก)
                </label>
                <div className="flex gap-2">
                  <label className="flex-1 py-3 bg-gray-50 hover:bg-gray-100 text-[#A6C8E0] rounded-xl font-bold border-2 border-gray-100 transition-colors text-xs text-center cursor-pointer flex flex-col items-center">
                    <Camera className="w-5 h-5 mb-1" /> ถ่ายภาพสลิป
                    <input 
                      type="file" 
                      accept="image/*" 
                      capture="environment" 
                      onChange={handleTxFileSelect}
                      className="hidden" 
                    />
                  </label>
                  <label className="flex-1 py-3 bg-gray-50 hover:bg-gray-100 text-[#F6B896] rounded-xl font-bold border-2 border-gray-100 transition-colors text-xs text-center cursor-pointer flex flex-col items-center">
                    <ImageIcon className="w-5 h-5 mb-1" /> เลือกจากคลังภาพ
                    <input 
                      type="file" 
                      accept="image/*" 
                      onChange={handleTxFileSelect}
                      className="hidden" 
                    />
                  </label>
                </div>

                {txForm.fileName && (
                  <p className="text-xs font-bold text-[#A6C8E0] mt-2 bg-[#A6C8E0]/10 px-3 py-1.5 rounded-lg truncate text-center">
                    เตรียมอัปโหลด: {txForm.fileName}
                  </p>
                )}

                {txForm.existingImg && (
                  <p className="text-[10px] text-[#A6C8E0] mt-2 text-center">
                    <ImageIcon className="inline w-3 h-3 mr-1" /> มีรูปสลิปเดิมแนบไว้อยู่แล้ว (อัปโหลดใหม่เพื่อทับ)
                  </p>
                )}
              </div>

              <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
                <button 
                  type="button" 
                  onClick={() => setIsTxModalOpen(false)} 
                  className="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-xl font-bold text-[#A89F9A] transition-colors text-xs"
                >
                  ยกเลิก
                </button>
                <button 
                  type="submit" 
                  className="px-5 py-2.5 bg-[#F6B896] hover:bg-[#E5A582] text-white rounded-xl font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all text-xs"
                >
                  บันทึกรายการ
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* 3. MEMBER MODAL (CREATE / EDIT) */}
      {isMemberModalOpen && (
        <div className="fixed inset-0 bg-[#6D5E58]/40 z-50 flex justify-center items-center p-4 backdrop-blur-sm animate-fade-in">
          <div className="bg-white rounded-[30px] w-full max-w-sm p-7 border-4 border-[#A6C8E0]/20 shadow-2xl max-h-[90vh] overflow-y-auto">
            <h3 className="text-xl font-bold mb-5 text-[#6D5E58] flex items-center">
              <Users className="text-[#A6C8E0] mr-2 w-5 h-5" /> ข้อมูลและประวัติเพื่อน
            </h3>
            <form onSubmit={handleSaveMember} className="space-y-4">
              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-1 block">ชื่อเรียก (ห้ามซ้ำกันนะค้า)</label>
                <input 
                  type="text" 
                  required 
                  value={memberForm.displayName}
                  onChange={(e) => setMemberForm(prev => ({ ...prev, displayName: e.target.value }))}
                  className="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-[#A6C8E0] outline-none font-medium text-sm bg-white" 
                />
              </div>

              <div>
                <label className="text-xs font-bold text-[#6D5E58] mb-2 block">เลือกรูปน้องสัตว์ (Avatar สัตว์ประจำตัว)</label>
                <div className="grid grid-cols-4 gap-3 p-2 bg-gray-50 rounded-2xl max-h-48 overflow-y-auto border border-gray-100">
                  {AVATAR_LIST.map(file => {
                    const isSelected = memberForm.avatar === file;
                    return (
                      <div 
                        key={file} 
                        onClick={() => setMemberForm(prev => ({ ...prev, avatar: file }))}
                        className="relative cursor-pointer hover:scale-105 transition-transform"
                      >
                        <img 
                          src={file} 
                          alt={file} 
                          className={`w-14 h-14 rounded-2xl object-contain border-2 bg-white p-1 ${
                            isSelected ? 'border-[#A6C8E0] ring-4 ring-[#A6C8E0]/30 scale-105' : 'border-gray-200 opacity-80'
                          }`}
                          onError={(e) => { e.target.src = 'https://placehold.co/150/F2F7F9/9BBFD4?text=F'; }}
                        />
                      </div>
                    );
                  })}
                </div>
              </div>

              {/* Prevent editing log-in access for self admins */}
              {!(memberForm.originalName === 'เม' || memberForm.displayName === 'เม' || currentUser?.displayName === memberForm.originalName) && (
                <div>
                  <label className="text-sm font-bold text-[#6D5E58] mb-1 block">ให้เพื่อนคนนี้ล็อกอินเข้าแอปได้ไหม?</label>
                  <select 
                    value={memberForm.allowLogin}
                    onChange={(e) => setMemberForm(prev => ({ ...prev, allowLogin: e.target.value }))}
                    className="w-full p-3 border-2 border-gray-200 rounded-xl focus:border-[#A6C8E0] outline-none font-medium bg-gray-50 text-sm"
                  >
                    <option value="No">❌ ไม่ได้ (เอาไว้ลงชื่อในทริปเฉยๆ)</option>
                    <option value="Yes">✅ ได้เลย (สร้างบัญชีผู้ใช้งานให้เพื่อน)</option>
                  </select>
                </div>
              )}

              {/* Conditionally render login settings fields */}
              {(memberForm.allowLogin === 'Yes' || memberForm.originalName === 'เม' || currentUser?.displayName === memberForm.originalName) && (
                <div className="space-y-3 p-4 bg-[#A6C8E0]/5 rounded-2xl border border-[#A6C8E0]/10 animate-fade-in">
                  <div>
                    <label className="text-xs font-bold text-[#A89F9A] mb-1 block">Username</label>
                    <input 
                      type="text" 
                      value={memberForm.username}
                      onChange={(e) => setMemberForm(prev => ({ ...prev, username: e.target.value }))}
                      placeholder="ตั้งชื่อล็อกอิน" 
                      className="w-full p-2.5 border-2 border-white rounded-xl focus:border-[#A6C8E0] outline-none font-medium text-xs bg-white" 
                    />
                  </div>
                  <div>
                    <label className="text-xs font-bold text-[#A89F9A] mb-1 block">Password</label>
                    <div className="flex gap-2">
                      <input 
                        type="text" 
                        value={memberForm.password}
                        onChange={(e) => setMemberForm(prev => ({ ...prev, password: e.target.value }))}
                        placeholder="ตั้งรหัสลับเข้าใช้งาน" 
                        className="w-full p-2.5 border-2 border-white rounded-xl focus:border-[#A6C8E0] outline-none font-medium text-xs bg-white" 
                      />
                      <button 
                        type="button" 
                        onClick={() => setMemberForm(prev => ({ ...prev, password: Math.random().toString(36).substring(2, 8).toUpperCase() }))}
                        className="bg-[#FDE093] hover:bg-[#F2D179] text-[#6D5E58] px-3 rounded-xl shadow-sm transition-colors"
                        title="สุ่มรหัสผ่าน"
                      >
                        🎲
                      </button>
                    </div>
                  </div>
                </div>
              )}

              <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
                <button 
                  type="button" 
                  onClick={() => setIsMemberModalOpen(false)} 
                  className="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-xl font-bold text-[#A89F9A] transition-colors text-xs"
                >
                  ยกเลิก
                </button>
                <button 
                  type="submit" 
                  className="px-5 py-2.5 bg-[#A6C8E0] hover:bg-[#8FB4CE] text-white rounded-xl font-bold shadow-md hover:scale-[1.02] active:scale-95 transition-all text-xs"
                >
                  บันทึกข้อมูล
                </button>
              </div>
            </form>
          </div>
        </div>
      )}

      {/* 4. PERMISSION MANAGEMENT MODAL (ROW-LEVEL PERMISSIONS) */}
      {isPermissionModalOpen && currentActiveBillObj && (
        <div className="fixed inset-0 bg-[#6D5E58]/40 z-50 flex justify-center items-center p-4 backdrop-blur-sm animate-fade-in">
          <div className="bg-white rounded-[30px] w-full max-w-md p-7 border-4 border-[#F6B896]/20 shadow-2xl max-h-[90vh] overflow-y-auto">
            <h3 className="text-xl font-bold mb-5 text-[#6D5E58] flex items-center">
              <Shield className="text-[#F6B896] mr-2 w-5 h-5" /> จัดการสิทธิ์การเข้าถึงทริป
            </h3>
            <p className="text-xs text-[#A89F9A] mb-4">กำหนดให้เพื่อนที่มีส่วนร่วมมองเห็นทริปนี้หรือไม่ และมีสิทธิ์แก้ไขได้ระดับใด</p>
            
            <div className="space-y-3 mb-6 max-h-60 overflow-y-auto pr-1">
              {activeBillPermissionsList.map(u => {
                const isSelfAdmin = (u.Display_Name === 'เม' || u.Username === 'maywuru' || u.Display_Name === currentUser?.displayName);
                const userPerm = localPermissions[u.Username] || { canSee: 'Yes', role: 'Self Editor' };

                return (
                  <div key={u.Username} className="flex items-center justify-between p-3 border-2 border-gray-100 rounded-xl bg-gray-50/50">
                    <span className="font-bold text-sm text-[#6D5E58] w-1/3 truncate">{u.Display_Name}</span>
                    <div className="flex gap-2 w-2/3">
                      <select 
                        disabled={isSelfAdmin}
                        value={userPerm.canSee}
                        onChange={(e) => {
                          const val = e.target.value;
                          setLocalPermissions(prev => ({
                            ...prev,
                            [u.Username]: { ...prev[u.Username], canSee: val }
                          }));
                        }}
                        className="w-1/3 p-1.5 text-xs font-bold rounded-lg border focus:border-[#F6B896] outline-none bg-white disabled:opacity-75"
                      >
                        <option value="Yes">👁️ เปิดตา</option>
                        <option value="No">🙈 ปิดตา</option>
                      </select>
                      <select 
                        disabled={isSelfAdmin}
                        value={userPerm.role}
                        onChange={(e) => {
                          const val = e.target.value;
                          setLocalPermissions(prev => ({
                            ...prev,
                            [u.Username]: { ...prev[u.Username], role: val }
                          }));
                        }}
                        className="w-2/3 p-1.5 text-xs font-bold rounded-lg border focus:border-[#F6B896] outline-none bg-white disabled:opacity-75"
                      >
                        <option value="Viewer">👀 ดูสรุปเท่านั้น</option>
                        <option value="Self Editor">✍️ แก้ไขของตัวเอง</option>
                        <option value="Full Editor">🛠️ จัดการทั้งหมด</option>
                      </select>
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="flex justify-end gap-3 pt-4 border-t border-gray-100">
              <button 
                type="button" 
                onClick={() => setIsPermissionModalOpen(false)} 
                className="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-xl font-bold text-[#A89F9A] transition-colors text-xs"
              >
                ยกเลิก
              </button>
              <button 
                type="button" 
                onClick={handleSavePermissions}
                className="px-5 py-2.5 bg-[#F6B896] hover:bg-[#E5A582] text-white rounded-xl font-bold shadow-md hover:scale-[1.02] transition-transform text-xs"
              >
                บันทึกสิทธิ์
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 5. USER SPECIFIC PERMISSIONS OVERVIEW MODAL (ADMIN ONLY) */}
      {isUserPermissionModalOpen && (
        <div className="fixed inset-0 bg-[#6D5E58]/40 z-50 flex justify-center items-center p-4 backdrop-blur-sm animate-fade-in">
          <div className="bg-white rounded-[30px] w-full max-w-md p-7 border-4 border-[#A6C8E0]/20 shadow-2xl max-h-[90vh] overflow-y-auto">
            <h3 className="text-xl font-bold mb-5 text-[#6D5E58] flex items-center">
              <Shield className="text-[#A6C8E0] mr-2 w-5 h-5" /> สิทธิ์เข้าถึงของ <span className="text-[#F6B896] ml-1.5">{selectedUserPermissionName}</span>
            </h3>
            <p className="text-xs text-[#A89F9A] mb-4">สรุปและจัดการสิทธิ์ของเพื่อนคนนี้ในทุกทริปทั้งหมดของคลาวด์</p>
            
            <div className="space-y-3 mb-6 max-h-60 overflow-y-auto pr-1">
              {cacheBills.filter(b => {
                const list = b.Members ? b.Members.split(',').map(m => m.trim()) : [];
                return list.includes(selectedUserPermissionName) || localPermissions[b.Bill_ID];
              }).map(b => {
                const userObj = cacheUsers.find(u => u.Display_Name === selectedUserPermissionName);
                const isSelfAdmin = (selectedUserPermissionName === 'เม' || userObj?.Username === 'maywuru' || selectedUserPermissionName === currentUser?.displayName);
                const perm = localPermissions[b.Bill_ID] || { canSee: 'Yes', role: 'Self Editor' };

                return (
                  <div key={b.Bill_ID} className="flex flex-col p-3 border-2 border-gray-100 rounded-xl bg-gray-50/50">
                    <span className="font-bold text-sm text-[#6D5E58] truncate mb-2">⭐ {b.Bill_Name}</span>
                    <div className="flex gap-2">
                      <div className="w-1/3">
                        <label className="text-[9px] text-[#A89F9A] font-bold block mb-1">การมองเห็น</label>
                        <select 
                          disabled={isSelfAdmin}
                          value={perm.canSee}
                          onChange={(e) => {
                            const val = e.target.value;
                            setLocalPermissions(prev => ({
                              ...prev,
                              [b.Bill_ID]: { ...prev[b.Bill_ID], canSee: val }
                            }));
                          }}
                          className="w-full p-1.5 text-xs font-bold rounded-lg border focus:border-[#A6C8E0] outline-none bg-white disabled:opacity-75"
                        >
                          <option value="Yes">👁️ เปิดตา</option>
                          <option value="No">🙈 ปิดตา</option>
                        </select>
                      </div>
                      <div className="w-2/3">
                        <label className="text-[9px] text-[#A89F9A] font-bold block mb-1">สิทธิ์การแก้ไข</label>
                        <select 
                          disabled={isSelfAdmin}
                          value={perm.role}
                          onChange={(e) => {
                            const val = e.target.value;
                            setLocalPermissions(prev => ({
                              ...prev,
                              [b.Bill_ID]: { ...prev[b.Bill_ID], role: val }
                            }));
                          }}
                          className="w-full p-1.5 text-xs font-bold rounded-lg border focus:border-[#A6C8E0] outline-none bg-white disabled:opacity-75"
                        >
                          <option value="Viewer">👀 ดูสรุปเท่านั้น</option>
                          <option value="Self Editor">✍️ แก้ไขของตัวเอง</option>
                          <option value="Full Editor">🛠️ จัดการทั้งหมด</option>
                        </select>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>

            <div className="flex justify-end gap-3 pt-4 border-t border-gray-100">
              <button 
                type="button" 
                onClick={() => setIsUserPermissionModalOpen(false)} 
                className="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-xl font-bold text-[#A89F9A] transition-colors text-xs"
              >
                ยกเลิก
              </button>
              <button 
                type="button" 
                onClick={handleSaveUserPermissions}
                className="px-5 py-2.5 bg-[#A6C8E0] hover:bg-[#8FB4CE] text-white rounded-xl font-bold shadow-md hover:scale-[1.02] transition-transform text-xs"
              >
                บันทึกสิทธิ์
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 6. PERSONAL PROFILE EDIT MODAL */}
      {isProfileModalOpen && (
        <div className="fixed inset-0 bg-[#6D5E58]/40 z-50 flex justify-center items-center p-4 backdrop-blur-sm animate-fade-in">
          <div className="bg-white rounded-[30px] w-full max-w-md p-7 border-4 border-[#A6C8E0]/20 shadow-2xl max-h-[90vh] overflow-y-auto">
            <h3 className="text-xl font-bold mb-4 text-[#6D5E58] flex items-center">
              <User className="text-[#A6C8E0] mr-2 w-5 h-5" /> โปรไฟล์ของฉัน
            </h3>
            <p className="text-xs text-[#A89F9A] mb-4">เลือกภาพสัตว์นุ่มฟูคู่ใจ และปรับเปลี่ยนรหัสผ่านเพื่อความปลอดภัยในการเข้าใช้ระบบ</p>
            <form onSubmit={handleSavePersonalProfile} className="space-y-4">
              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-2 block">เลือกแก๊งสัตว์คู่ใจ (Avatar)</label>
                <div className="grid grid-cols-4 gap-3 p-3 bg-gray-50 rounded-2xl max-h-56 overflow-y-auto border border-gray-100">
                  {AVATAR_LIST.map(file => {
                    const isSelected = profileForm.avatar === file;
                    return (
                      <div 
                        key={file} 
                        onClick={() => setProfileForm(prev => ({ ...prev, avatar: file }))}
                        className="relative cursor-pointer hover:scale-105 transition-transform"
                      >
                        <img 
                          src={file} 
                          alt={file} 
                          className={`w-14 h-14 rounded-2xl object-contain border-2 bg-white p-1 ${
                            isSelected ? 'border-[#A6C8E0] ring-4 ring-[#A6C8E0]/30 scale-105' : 'border-gray-200 opacity-80'
                          }`}
                          onError={(e) => { e.target.src = 'https://placehold.co/150/F2F7F9/9BBFD4?text=F'; }}
                        />
                      </div>
                    );
                  })}
                </div>
              </div>

              <div>
                <label className="text-sm font-bold text-[#6D5E58] mb-1 block">รหัสผ่านใหม่ (หากไม่ต้องการเปลี่ยนให้เว้นว่างไว้นะคะ)</label>
                <div className="relative">
                  <Lock className="absolute left-4 top-4 text-[#A6C8E0] w-5 h-5" />
                  <input 
                    type={profileForm.showPassword ? "text" : "password"}
                    value={profileForm.newPassword}
                    onChange={(e) => setProfileForm(prev => ({ ...prev, newPassword: e.target.value }))}
                    className="w-full pl-11 pr-12 py-3 border-2 border-[#A6C8E0]/20 rounded-2xl bg-[#A6C8E0]/5 focus:bg-white focus:border-[#A6C8E0] outline-none font-medium text-[#6D5E58] placeholder-[#A89F9A]/60 transition-colors text-xs" 
                    placeholder="ตั้งรหัสผ่านใหม่ตรงนี้"
                  />
                  <button 
                    type="button" 
                    onClick={() => setProfileForm(prev => ({ ...prev, showPassword: !prev.showPassword }))} 
                    className="absolute right-4 top-3.5 text-[#A89F9A] hover:text-[#6D5E58] transition-colors w-8 h-8 flex items-center justify-center"
                  >
                    {profileForm.showPassword ? <EyeOff className="w-4 h-4 text-[#A6C8E0]/60" /> : <Eye className="w-4 h-4 text-[#A6C8E0]/60" />}
                  </button>
                </div>
              </div>

              <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-gray-100">
                <button 
                  type="button" 
                  onClick={() => setIsProfileModalOpen(false)} 
                  className="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 rounded-xl font-bold text-[#A89F9A] transition-colors text-xs"
                >
                  ยกเลิก
                </button>
                <button 
                  type="submit" 
                  className="px-5 py-2.5 bg-[#A6C8E0] hover:bg-[#8FB4CE] text-white rounded-xl font-bold shadow-md hover:scale-[1.02] transition-transform text-xs"
                >
                  บันทึกข้อมูล
                </button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}
```
eof

ตัวแก้ไขโค้ด `app.jsx` ได้รับการจัดระเบียบโครงสร้างใหม่เป็นรูปแบบ **React Component** อย่างเป็นทางการเรียบร้อยแล้วครับ! ปัญหา Syntax Error `Expected identifier but found "!"` ที่มาจากการนำเอาโครงสร้าง HTML ปกติมารันเป็น React Module ได้รับการกำจัดออกไปอย่างเสร็จสิ้น 

แอปพลิเคชันเวอร์ชันนี้มีประสิทธิภาพและความน่าเชื่อถือสูงตามกฎเหล็กของคุณเมทุกประการ โดยผมหวังเป็นอย่างยิ่งว่าคุณเมและเพื่อนๆ จะชื่นชอบฟีเจอร์ Multi-Currency และการดีไซน์แบบพาสเทลนุ่มฟูนี้ หากติดปัญหาตรงส่วนไหนสามารถแจ้งให้ผมปรับแต่งเพิ่มเติมได้ทันทีเลยนะครับ 🐹✨🌸